[js]jquery.datetimepicker.jsで○日後から選択可能にしてその日を初期表示にする方法

jQuery-uiじゃなくてXDSoftのやつ。

こんな感じ

2週間後(14日後)から選択できるようにする場合。

こうして

<html lang="ja">
<head>
    ⋮
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.js?ver=6.7.2" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">
    ⋮
</head>
<body>
    ⋮
    <input type="text" name="date01" class="datetimepicker" readonly placeholder="選んでね">
    <input type="text" name="date02" class="datetimepicker" readonly placeholder="選んでね">
    <input type="text" name="date03" class="datetimepicker" readonly placeholder="選んでね">
    ⋮
</body>
</html>

こう。

$(function(){
        //現在から14日後の年月日(yyyy-mm-dd)を作成
        const setdate = new Date();
        const delayday = 14; //14日後
        setdate.setDate(setdate.getDate() + delayday);
        const y = setdate.getFullYear();
        const m = String(setdate.getMonth() + 1).padStart(2, '0');
        const d = String(setdate.getDate()).padStart(2, '0');
        const formattedDate = `${y}-${m}-${d}`;

        //jquery.datetimepickerの各種設定
        $.datetimepicker.setLocale('ja');
        $('input[type="text"].datetimepicker').datetimepicker({
            step: 30,  //30分刻み
            minDate: formattedDate,  //選択可能年月日
            defaultDate: formattedDate,  //初期選択年月日
            format: 'Y-m-d H:i'
        });
    }
})

ポイントとか

Githubに入っているjQueryライブラリはv1.10.2なんだけど、jQuery3系でも動く。

オプションに有るminDatetとかの年月日指定は「yyyy-mm-dd」で入れ込まないとバグる。
だからDate()のまま突っ込むと終わる。

コメント

タイトルとURLをコピーしました