jQuery DateTimePicker와 Moment JS의 연동

Datetimepicker JS with Moment JS

개발을 하다보면 datetime 이 같이 필요한 경우가 생긴다.
pickadate 를 사용해 date 와 time picker 를 모두 사용해 만들 수도 있지만
datetimepicker가 편하고 쉽다.

설치

1
2
3
4
# datetimepicker
$ bower install https://github.com/xdan/datetimepicker.git --save
# moment
$ bower install moment --save

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<link
rel="stylesheet"
type="text/css"
href="/bower_components/datetimepicker/build/jquery.datetimepicker.min.css"
/>
<!-- php.date.formatter.js 와 jquery.mousewheeel.js 를 포함하는 full.js-->
<!-- moment는 이미 선언되어있다고 가정합니다 -->
<script src="/bower_components/datetimepicker/build/jquery.datetimepicker.full.min.js"></script>

<script>
// dateTimePicker localization
$.datetimepicker.setLocale('ko');
// dateTimePicker moment.js와 연동
$.datetimepicker.setDateFormatter({
parseDate: function (date, format) {
var d = moment(date, format);
return d.isValid() ? d.toDate() : false;
},

formatDate: function (date, format) {
return moment(date).format(format);
},
});

$(function () {
// datetimepicker init
$('.datetimepicker').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
formatTime: 'HH:mm',
formatDate: 'YYYY-MM-DD',
});
});
</script>

<input type="text" name="startDate" class="datetimepicker" /> ~
<input type="text" name="endDate" class="datetimepicker" />

여담

pickadate 에서 datetime 을 같이 지원해주는 모듈도 만들어주면 얼마나 좋을까?