[jQuery]datepicker에서 여러 날짜 선택할 수 있게

Programming/Javascript 2021. 12. 2. 14:48

728x90

jQuery UI에서 제공하는 datepicker에서는 기본적으로 날짜를 하나씩 선택하게 되어 있습니다. 간혹 여러 개의 날짜를 선택해야 할 때는 다른 플러그인을 써야 합니다. bootstrap에서 제공하는 datepicker가 있지만 css 문제 때문에 쓰기가 좀 꺼려지더라구요. 그래서 찾은 게 MultiDatesPicker입니다.

css도 기존에 작업해 둔 것과 부딪히지지도 않고 해서 이걸 썼는데 세상에나 datepicker 레이어가 뜬 상태에서 날짜를 선택하면 깜빡임이 있네요. github 가서 검색을 해 보니 이 링크가 있네요. 이걸 $(".date").multiDatesPicker() 호출 전에 써 주면 됩니다.

$(function() {
    $.datepicker._selectDateOverload = $.datepicker._selectDate;
    $.datepicker._selectDate = function (id, dateStr) {
        var target = $(id);
        var inst = this._getInst(target[0]);
        if (target[0].multiDatesPicker != null) {
            inst.inline = true;
            $.datepicker._selectDateOverload(id, dateStr);
            inst.inline = false;
            target[0].multiDatesPicker.changed = false;
        } else {
            $.datepicker._selectDateOverload(id, dateStr);
            target.multiDatesPicker.changed = false;
        }
        this._updateDatepicker(inst);
    };

    $(".day-off").multiDatesPicker({
        dateFormat: "yy-mm-dd"
    });
});

<input type="text" name="day_off" class="day-off">

반응형