웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
날짜 시간을 입력 받을 수 있는 라이브러리 datetimepicker UI는 시간과 날짜를 함께 설정할 수 있는 편리한 UI 컴포넌트로 매우 자주 사용됩니다. 아래는 datetimepicker의 날짜 시간 포맷을 동적으로 변경하는 방법에 대하여 알아보겠습니다.
만약 상황에 따라 사용할 날짜/시간 포맷을 동적(dynamic)으로 변경하려면 어떻게 해야할까요? 페이지 로딩시 설정 한 config에서 datetimepicker 날짜, 시간 포맷을 변경하려면 잘 되지 않습니다. 그래서 다른 방법이 필요하죠.
# datetimepicker 날짜, 시간 포맷 동적으로 바꾸기
예를들어 페이지 로딩시 아래와 같이 포맷 날짜/시간으로 input 태그를 사용하기 위해 설정되어 있다고 가정합니다.
여기서 이미 설정된 datetimepicker 요소의 날짜, 시간 포맷만 변경하기 위해서 .format() 이라는 메소드, 함수를 사용합니다. format()은 설정된 포맷으로 변경할 수 있는 방법입니다.
위 코드를 적용하면 기존의 '년-월-일 시:분:초'의 포맷에서 '시:분:초' 포맷으로 바로 변경될 것입니다. 중요한 부분은 아래와 같이 data()와 format()을 사용해야 한다는 점입니다.
이제 즉시 원하는 포맷으로 바꿀 수 있게 되었습니다.
만약 상황에 따라 사용할 날짜/시간 포맷을 동적(dynamic)으로 변경하려면 어떻게 해야할까요? 페이지 로딩시 설정 한 config에서 datetimepicker 날짜, 시간 포맷을 변경하려면 잘 되지 않습니다. 그래서 다른 방법이 필요하죠.
# datetimepicker 날짜, 시간 포맷 동적으로 바꾸기
예를들어 페이지 로딩시 아래와 같이 포맷 날짜/시간으로 input 태그를 사용하기 위해 설정되어 있다고 가정합니다.$('#startTime').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss'
});
format: 'YYYY-MM-DD HH:mm:ss'
});
여기서 이미 설정된 datetimepicker 요소의 날짜, 시간 포맷만 변경하기 위해서 .format() 이라는 메소드, 함수를 사용합니다. format()은 설정된 포맷으로 변경할 수 있는 방법입니다.
$('#startTime').datetimepicker().data('DateTimePicker').format('HH:mm:ss');
위 코드를 적용하면 기존의 '년-월-일 시:분:초'의 포맷에서 '시:분:초' 포맷으로 바로 변경될 것입니다. 중요한 부분은 아래와 같이 data()와 format()을 사용해야 한다는 점입니다.
.data('DateTimePicker').format('HH:mm:ss');
이제 즉시 원하는 포맷으로 바꿀 수 있게 되었습니다.
아래의 글도 찾고 계시지 않나요?