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

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">

반응형
저작자표시

'Javascript' 카테고리의 다른 글

Uncaught SyntaxError: Cannot use import statement outside a module  (0) 2022.01.27
[jQuery]이미지 첨부 시 미리 보기  (0) 2021.12.08
[jQuery]datepicker에서 여러 날짜 선택할 수 있게  (0) 2021.12.02
[jQuery]datepicker에서 date format을 두 가지 이상으로...  (0) 2021.08.19
반복문 내에서 탈출(?)하기  (0) 2021.07.22
하이브리드 앱으로 접속을 했는지, 모바일 브라우저로 접속했는지...  (0) 2021.04.06

댓글 0

확인