취업/Daterangepicker

[php]daterangepicker 월요일 선택시 자동 일요일도 추가.

카슈밀 2021. 11. 9. 14:11
반응형
$('#dates').daterangepicker({
        "locale": {
            startOfWeek: 'monday',
            "format": "YYYY-MM-DD",
            "separator": " ~ ",
            "applyLabel": "확인",
            "cancelLabel": "취소",
            "fromLabel": "From",
            "toLabel": "To",
            "customRangeLabel": "Custom",
            "weekLabel": "W",
            "daysOfWeek": ["일", "월", "화", "수", "목", "금", "토"],
            "monthNames": ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
        },
        singleDatePicker: true,
        "maxSpan": {
            "days": 6
        },
        isInvalidDate: function(date) {
            return parseInt(1) !== new Date(date).getDay();
        },
        autoUpdateInput: false,
    });
    $('#dates').on('apply.daterangepicker', function(ev, picker) {
        if(parseInt(1) == new Date(picker.startDate).getDay()) {
            return $(this).val(picker.startDate.format('YYYY-MM-DD') + ' ~ ' + moment(picker.startDate).add("6", "d").format('YYYY-MM-DD'));
        } else {
            alert('기간 시작은 월요일만 가능합니다.');
            return $(this).val('');;
        }
    });
    
    $('#dates').on('cancel.daterangepicker', function(ev, picker) {
        return $(this).val('');
    });

작동 방법은 이전에 작성한 코드를 보면 된다. 사용 라이브러리 moment, daterangepicker.

가급적 사용자 오류를 줄이려고 2일 선택에서 1일 선택으로 변경하고,

월요일+6일해서 그 주의 일요일로 기간이 추가되게 하였다.

 

오류 발생하면 또 포스팅 하겠지...

728x90

'취업 > Daterangepicker' 카테고리의 다른 글

[php] daterangepicker week 선택하기.  (0) 2021.11.09
[php] daterangepicker 적용하기  (0) 2021.11.08