Skip to main content

2 posts tagged with "moment"

View All Tags

· 2 min read
Gracefullight

java에 joda-time이 있듯 javascript에는 moment가 있다. 기초적인 moment 사용법은 알고 있다고 가정한다.

calandar

현재시각과 비교해 날짜를 어제 오후 12:31처럼 표시하고 싶은 경우 사용한다.

소스​

moment(date).calendar(today, { sameElse: "YYYY-MM-DD HH:mm:ss" });

date는 비교할 날짜, today는 현재시각 값이다. 일주일 이하일 경우 어제.. 그저께.. 등으로 반환되고, 이상일 경우 sameElse에 등록된 포맷으로 반환된다.

global locale 설정을 지정하지 않았을 경우 sameElse가 들어가는 option object 안에 locale을 커스터마이징 할 수 있다.

기타 옵션은 API 참조

diff

A에서 B의 차이를 구할 때 쓰는 diff method를 쓰다가, 월 또는 년도의 차이를 계산하는 경우가 생긴다.

소스​

worst case​

moment("2016-06").diff("2015-01", "month");

이렇게 처리하면 되지 않을까? 동작은 하지만 오류가 날 수 있다고 console.warning 이 찍힌다.

good case​

moment([2016, 06]).diff([2015, 01], "month");

실행이 잘되지만, YYYY-MM을 split해서 넣어줘야하는 번거로움이 있다.

best case​

moment("2016-06", "YYYY-MM").diff("2015-01", "month");

moment 형식으로 변환시 두번째 파라미터에 포맷을 지정하면 console.warning도 없고 번거로움도 사라진다!

· 2 min read
Gracefullight

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

설치​

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

예제​

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