フォームの日時選択欄によく使用される「DateTimePicker」。
作成するサイトによっては営業日だけ、営業時間だけを選択できるようにしたいこともありますよね。
今回はそんなサイトでコピペで使える、平日の指定時間だけを選択可能にする方法を紹介します！
実装方法
DateTimePickerの設定方法は割愛させていただいて、今回の平日の指定時間だけを選択可能にする実装コードを早速紹介します。
[#date_input]というidが付与された入力欄に設定するためのコードがこちら。
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.20/build/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.20/build/jquery.datetimepicker.min.css">
<script>
jQuery(function($){
const options = {
format: 'Y-m-d H:i', // 日付のフォーマット
step: 30,
disabledWeekDays: [0, 6], // 土日を無効化
allowTimes: generateAllowedTimes('10:00', '18:00', 30) // 指定した時間を30分刻みで設定
};
$('#date_input').datetimepicker(options);
function generateAllowedTimes(start, end, intervalMinutes) {
const times = [];
const [startHour, startMin] = start.split(':').map(Number);
const [endHour, endMin] = end.split(':').map(Number);
const startDate = new Date(0, 0, 0, startHour, startMin);
const endDate = new Date(0, 0, 0, endHour, endMin);
while (startDate <= endDate) {
const hours = String(startDate.getHours()).padStart(2, '0');
const mins = String(startDate.getMinutes()).padStart(2, '0');
times.push(`${hours}:${mins}`);
startDate.setMinutes(startDate.getMinutes() + intervalMinutes);
}
return times;
}
});
</script>
デフォルトの設定では制御しきれない部分があるためjsで細かい設定を組み生成しています。
[options]内の指定を変えるだけで、日付のフォーマットや無効化の曜日、時間の範囲を設定できます。（日付は日曜が0、土曜日が6になるため、間の曜日を指定する場合はそこの数字を変更してください。）
日本語対応する場合
上記のコードのままでは英語になってしまうため、日本語化をしたいと思います。
違うjsを読み込めば変えられるというのもありますが…今回はそこまで手をかけず、js側で置換します。
See the Pen Untitled by Ayane (@ayane_cmn) on CodePen.
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.20/build/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.20/build/jquery.datetimepicker.min.css">
<script>
jQuery(function($){
$.datetimepicker.setLocale('ja');// 日本語ローカライズの定義
const options = {
format: 'Y年m月d日 H:i', // 日付のフォーマット
step: 30,
disabledWeekDays: [0, 6], // 土日を無効化
allowTimes: generateAllowedTimes('10:00', '18:00', 30), // 指定した時間を30分刻みで設定
i18n: {
ja: {
months: [
'1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'
],
dayOfWeek: [
'日', '月', '火', '水', '木', '金', '土'
]
}
}
};
$('#date_input').datetimepicker(options);
function generateAllowedTimes(start, end, intervalMinutes) {
const times = [];
const [startHour, startMin] = start.split(':').map(Number);
const [endHour, endMin] = end.split(':').map(Number);
const startDate = new Date(0, 0, 0, startHour, startMin);
const endDate = new Date(0, 0, 0, endHour, endMin);
while (startDate <= endDate) {
const hours = String(startDate.getHours()).padStart(2, '0');
const mins = String(startDate.getMinutes()).padStart(2, '0');
times.push(`${hours}:${mins}`);
startDate.setMinutes(startDate.getMinutes() + intervalMinutes);
}
return times;
}
});
</script>
まとめ
フォームの入力欄の仕様に凝り始めると何かと手がかかりますが、一手間加わっているとユーザーにとっては使いやすいサイトになりますよね。
私自身もユーザーとして使う時「お！このフォームの仕様は今度真似しよう！」と思うことがよくあります。
フォームの仕様…もっと突き詰めていきたいです！笑
