Gracefullight

Web.dev

jQuery DateTimePicker와 Moment JS의 연동

작성일 Edited on In , Disqus:

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 을 같이 지원해주는 모듈도 만들어주면 얼마나 좋을까?