javascript, moment.js, 날짜 및 시간 입력 간편 설정

사이트 개발시 날짜 및 시간 입력은 필수로 들어가는 기능입니다.

이를 모두 개발하려면 시간이 많이 걸리기 때문에 이미 개발된 오픈소스들을 많이 사용합니다.

저는 이번에 date Range Picker를 사용 했습니다.(http://www.daterangepicker.com/ 참조)

하나의 입력 창에서 시작일, 시작시간, 종료일, 종료 시간을 모두 선택할 수 있고,

시작일부터 종료일까지 범위가 설정됩니다.

7일, 1달 등 특정 기간별 검색 기능까지 존재합니다. 

부가기능들을 잘 사용한다면 왠만한 날짜/시간 선택 옵션은 다 구현 할 수 있을 것 같습니다.

아래의 코드는 위의 사진의 기능을 자바스크립트로 구현한 코드입니다.

$(function () {
    $("#a").daterangepicker({
        timePicker: true,
        timePickerIncrement: 30,
        locale: {
            format: 'YYYY/MM/DD h:mm A'
        },
        startDate : moment().add(14, 'days'),
        endDate : moment().add(14, 'days').add(2,'hours')
    });
});

위에 코드에서 보면 moment() 메소드를 사용 했는데, 이는 moment.js를 사용했기 때문입니다.(참조 http://momentjs.com/)

현재 시간 입력 => moment() 

오늘 날짜 + 14일 => moment().add(14, 'days')

오늘 날짜 + 14일 +2시간 => moment().add(14, 'days').add(2, 'hours')

이처럼 년,월,일,시,분,초 단위로 원하는 시간을 초기값으로 설정 해줄 수 있습니다.

더 다양한 옵션은 위에 링크를 타고 이동하시면 바로 보실 수 있습니다.