[php] daterangepicker week 선택하기.

$('#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월"],
        },
        "maxSpan": { // 사이 기간 최대 몇일까지 하기. 최소기간은 없더라...
            "days": 6
        },
        isInvalidDate: function(date) { // 일요일과 월요일만 선택하게 만들기. 찾아보니 beyond 함수?인지 뭔지 datepicker 함수 같았음. 
            return parseInt(0) !== new Date(date).getDay() && parseInt(1) !== new Date(date).getDay();
        },
    });
    $('#dates').on('apply.daterangepicker', function(ev, picker) { // ok버튼 부분.
        if(parseInt(1) == new Date(picker.startDate).getDay()) { //날짜를 getday하면 1~6,0 으로 출력하는데, 0일요일 1월~6토요일로 구성된다.
            return $(this).val(picker.startDate.format('YYYY-MM-DD') + ' ~ ' + picker.endDate.format('YYYY-MM-DD')); 시작이 월요일이면 해당 정상 작동을 아니라면 경고후 빈값을!
        } else {
            alert('기간 시작은 월요일만 가능합니다.');
            return $(this).val('');;
        }
    });
    
    $('#dates').on('cancel.daterangepicker', function(ev, picker) {
        return $(this).val('');
    });

daterangepicker의 경우 주간 선택 코드가 있지 않아서 내가 부득이하게 만들었다.

 

처음에는 isoweek로 주차를 알아 그 경우 첫날과 끝날을 가져오려고 했는데, 어려워...

특히 이건 새로운 라이브러리라 해당 코드들이 없었다.

부득이하게 일요일과 월요일로 하고 기간을 최소 6일로 잡게하여 다른 기간을 겹치지 않게 했더니

문제는 전주 일요일과 차주 월요일이 선택되는 문제였다.

그부분을 해결하기 위해서 월요일인지 여부 체크 추가.

 

https://jsfiddle.net/ou821edr/7/

jQuery toggleClass example - JSFiddle - Code Playground

 

사이트 접속시 초기값이 들어가는 경우가 있어 해당 부분을 추가.

$('#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월"],
        },
        "maxSpan": {
            "days": 6
        },
        isInvalidDate: function(date) {
            return parseInt(0) !== new Date(date).getDay() && parseInt(1) !== new Date(date).getDay();
        },
        autoUpdateInput: false, // init 값 없애는 코드
        locale: {
            cancelLabel: 'Clear'
        }
    });
    $('#dates').on('apply.daterangepicker', function(ev, picker) {
        if(parseInt(1) == new Date(picker.startDate).getDay()) {
            return $(this).val(picker.startDate.format('YYYY-MM-DD') + ' ~ ' + picker.endDate.format('YYYY-MM-DD'));
        } else {
            alert('기간 시작은 월요일만 가능합니다.');
            return $(this).val('');;
        }
    });
    
    $('#dates').on('cancel.daterangepicker', function(ev, picker) {
        return $(this).val('');
    });

 

그래서 해당 apply 코드를 찾고 있다가 발견.

https://laravelquestions.com/2021/05/04/how-to-set-the-default-value-of-date-range-picker-to-null/

How to set the default value of Date Range Picker to null – Laravel Questions