[Javascript] Daterangepicker Custom

안녕하세요🙏 개발자 재민콩입니다.

 

오늘은 daterangepicker 자주사용하는 옵션과, 사용법에 대해 알아보겠습니다.

 

1. daterangepicker 설치

npm i daterangepicker

 

2. JQuery를 사용한 daterangepicker 사용법

// 오늘 날짜 데이터
const d = new Date();
const day = d.getDate();
const month = d.getMonth();

$('.custom-daterangepicker').daterangepicker({
  // datarangepicker은 기본값으로 자동으로 오늘 날짜를 삽입한다.
  // 값을 비우고 focus가 없어져도 데이터가 오늘 날짜로 입력되면 해제하기 위해 autoUpdateInput: false 사용
  autoUpdateInput: false,
  // 시작일 기본값을 한 달 전으로 고정
  startDate: new Date(new Date().setMonth(month - 1)).toLocaleDateString(),
  // 종료일 기본값을 오늘로 고정
  endDate: new Date(),
  locale: {
    format: 'YYYY-MM-DD',
    separator: ' ~ ',
    applyLabel: '확인',
    cancelLabel: '취소',
  },
  // 사용자 편의성을 위해 사용 오늘, 7일 전, 30일 전, Custom Range(사용자 조작으로 설정)
  ranges: {
    오늘: [new Date(), new Date()],
    '7일 전': [new Date(new Date().setDate(day - 7)).toLocaleDateString(), new Date()],
    '30일 전': [new Date(new Date().setMonth(month - 1)).toLocaleDateString(), new Date()],
  },
});

// autoUpdateInput을 false로 설정하여 날짜 선택 이벤트가 없으므로 포맷에 맞는 이벤트 추가
$('.custom-daterangepicker').on('apply.daterangepicker', function (ev, picker) {
  $('.custom-daterangepicker').val(picker.startDate.format('YYYY-MM-DD') + ' ~ ' + picker.endDate.format('YYYY-MM-DD'));
});
// Custom Range 텍스트를 맞춤으로 변경하기 위해 사용
$('.custom-daterangepicker').on('focus', function () {
  $('[data-range-key="Custom Range"]').text('맞춤');
});

 

3. 적용화면

 

4. Reference

• Daterangepicker