범위달력 daterangepicker를 사용해보자! / 날짜형식도 한국기준으로!

그냥 요즘 작업하다가 기록차 남겨둡니다. 워낙 여러가지 많아서 뭔가 남겨놔야 할거 같다는 생각이 들더군요..

daterangepicker는 날짜의 범위를 지정하여 입력 받는 프로그램인데요. 일반 달력으로도 사용할 수 있고, 시간도 입력 받을 수 있습니다. 잘 사용하면, 달력에서는 만능으로 사용할 수 있는 콤포넌트 입니다.

다운로드 받을 수 있는 주소는 다음과 같습니다.

https://www.daterangepicker.com/

다운로드 받기 힘들면 주소에 있는 CDN을 사용해도 됩니다.

원하시는 곳에 압축을 해제하여 업로드 해둡니다.

그리고 다음처럼 해더에 세팅합니다.

<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/daterangepicker/moment.min.js"></script>
<script type="text/javascript" src="/js/daterangepicker/moment-with-locales.js"></script> //언어 파일
<script type="text/javascript" src="/js/daterangepicker/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="/js/daterangepicker/daterangepicker.css" />

위의 코드에서 “언어파일” 이라고 되어있는 파일은 다음 사이트에서 구합니다.

https://momentjs.com/

위와 같이 모든 파일이 다 갖춰졌으면, 폼을 하나 만들어 달력 콤포넌트를 입혀봅니다.

날짜만 입력받는 폼입니다.

<script type="text/javascript">
  moment.locale('ko'); //언어를 한국어로 설정함!
  $('#date').daterangepicker(
    {
      timePicker: false,
      timePicker24Hour: true,
      timePickerSeconds: true,
      singleDatePicker: false,
      locale :{ 
        format: 'YYYY-MM-DD',
        separator: ' ~ ',
        applyLabel: "적용",
        cancelLabel: "닫기"
      },
    });
</script>

날짜와 시간을 모두 입력 받는 폼입니다.

<script type="text/javascript">
   moment.locale('ko'); //언어를 한국어로 설정함!
   $('#mc_reg_date').daterangepicker(
        {
            timePicker: true,
            timePicker24Hour: true,
            timePickerSeconds: false,
            singleDatePicker: false,
            locale :{
                format: 'YYYY-MM-DD HH:mm:ss',
                separator: ' ~ ',
                applyLabel: "적용",
                cancelLabel: "닫기"
            },
   });
</script>

년월 부분이 위처럼 안나올 것입니다. 이부분은 라이브러리의 소스를 고쳐야합니다.

좀전에 daterangepicker.js 파일을 열어보면 707번째줄 정도에 다음과 같은 부분이 있습니다.

var dateHtml = this.locale.monthNames[calendar[1][1].month()] + calendar[1][1].format(" YYYY");

이렇게 바꿔주시면 좀더 자연스러운 달력이 될거에요!! (위치를 바꾸는거죠^^)

var dateHtml = calendar[1][1].format(" YYYY") + " " + this.locale.monthNames[calendar[1][1].month()];

이런 말은 안할려고 했습니다만,

이글을 국내최대 PHP개발자 체팅방으로 유명한 카카오톡 개발자 모임 단톡방인 “PHP 스터디방”에 바칩니다.

감사합니다!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.