daterangepicker 달력 사용하기

결과

daterangepicker 2.1.30 버전 사용!!

 

<input type='text' class="form-control linkedCalendars" placeholder="날짜 선택"/>
<span class="input-group-text calendar-icon">
<i data-feather="calendar" class="feather-sm"></i>
</span>

html 은 위와 같이 하고 스크립트는 아래와 같이 작성!

 

날짜를 선택할 때마다 function(start,end,label){}~ 이부분에 입력한 콘솔값이 나타난다. 

즉 셋팅 한 일자를 원하는 변수에 넣고자 할때  function안에 입력하면 된다.

 

$('.linkedCalendars').daterangepicker({
linkedCalendars: false,
"locale":{
"format": "YYYY-MM-DD",
"separator": " ~ ",
"applyLabel": "적용",
"cancelLabel": "취소",
"fromLabel": "From",
"toLabel": "To",
"customRangeLabel": "Custom",
"daysOfWeek": ["일","월", "화", "수", "목", "금", "토"],
"monthNames": ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"] },
}, function (start, end, label) {
console.log('선택된 날짜: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});

 

내가 원하는 날짜로 달력에 셋팅 해주고자 할땐 ?

시작 날짜와 종료날짜를 다음과 같이 설정이 가능하다.

$(".linkedCalendars").data('daterangepicker').setStartDate('2021-09-01');
$(".linkedCalendars").data('daterangepicker').setEndDate('2021-09-01');