그냥 요즘 작업하다가 기록차 남겨둡니다. 워낙 여러가지 많아서 뭔가 남겨놔야 할거 같다는 생각이 들더군요..
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" />
위의 코드에서 “언어파일” 이라고 되어있는 파일은 다음 사이트에서 구합니다.
위와 같이 모든 파일이 다 갖춰졌으면, 폼을 하나 만들어 달력 콤포넌트를 입혀봅니다.
날짜만 입력받는 폼입니다.
<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 스터디방”에 바칩니다.
감사합니다!