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()のまま突っ込むと終わる。

コメント