Q&A
Flatpickr とはこれのことですか？
https://flatpickr.js.org/
実現したいこと
Flatpickrで、
土：10:00～16:00
月・木・金：10:00～19:00
火・水：10:00～11:00,18:00～19:00
と曜日によって選択する時間帯を制限できるようにしたいです。
Wordpress内のContact7の予約ページで曜日ごとに予約時間を設定したいと思っています。
日曜日は選択不可に、その他の曜日において10：00～19：00の制限はできたのですが、曜日ごとに時間選択を変える方法がわかりません。
いろいろ検索してみて試してみましたがうまくいきませんでした。
下のところに追加で何を入れたらよいか、ご教授願えたら幸いです。
<td>第1希望：<input type="text" class="date" name="your-data1"> 第2希望：<input type="text" class="date" name="your-data2"> <script> async function flatpickrInit() { let minDate = new Date(); minDate = minDate.setDate(minDate.getDate() + 1); flatpickr('.date', { locale : 'ja', dateFormat : 'Y.m.d(D) H:i', defaultDate : minDate, enableTime: true, minDate : minDate, disable: [ function(date){ return (date.getDay() === 0 ); } ], time_24hr: true, minuteIncrement: 30, minTime: '10:00', maxTime: '19:00', }); } flatpickrInit(); </script> ----------------------------------------------
以上、よろしくお願いいたします。
回答1件
0
ベストアンサー
この記事が参考になるかもしれません。
日付によって時間の選択範囲を変更① | Flatpickrで日時入力をカレンダー表示にする｜notes by SHARESL
投稿2023/10/30 04:08
総合スコア37409
ありがとうございます。
こちらの①をまるまる入れてみましたが、動きませんでした。なぜでしょうか？
コードをご提示ください。
こんな感じ↓で入れてみましたが、箱が空でカレンダーさえ表示されなくなりました。
どうぞよろしくお願いいたします。
<td class="yoyaku"><span class="b">ご希望の日時</span> <span class="sankou">必須</span></td>
<td>第1希望：<input type="text" class="date" name="your-data1"> <input type="time" class="menu-time" name="menu-time1"></select> ～
第2希望：<input type="text" class="date" name="your-data2"> <input type="time" class="menu-time" name="menu-time2"></select> ～
<script>
async function flatpickrInit() {
let minDate = new Date();
minDate = minDate.setDate(minDate.getDate() + 1);
flatpickr('.date', {
locale : 'ja',
dateFormat : 'Y.m.d(D) H:i',
enableTime: true,
minDate : minDate,
disable: [
function(date){
return (date.getDay() === 0 );
}
],
time_24hr: true,
minuteIncrement: 30,
minTime: '10:00',
maxTime: '19:00',
};
const holidays = await fetchHolidays();
onDayCreate :
addHolidayClass(holidays),
onChange :{
if(!selectedDates[6])
return;
//土曜は10:00〜16:00
if(date.getDay() === 6){
instance.set('minTime', '10:00');
instance.set('maxTime', '16:00');
}
else {
instance.set('minTime', '10:00'),
instance.set('maxTime', '19:00'),
}})}
flatpickrInit();
</script>
</td>
文法エラーが出ていますね。かっこの対応などがズレているようです。
VSCodeなど、文法チェック機能が付いたコードエディタを使ってみてはどうでしょうか。
とりあえず、これは動きました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
</head>
<body>
<td class="yoyaku"><span class="b">ご希望の日時</span> <span class="sankou">必須</span></td>
<td>第1希望：<input type="text" class="date" name="your-data1"> <input type="time" class="menu-time"
name="menu-time1"></select> ～
第2希望：<input type="text" class="date" name="your-data2"> <input type="time" class="menu-time"
name="menu-time2"></select> ～
<script>
//翌日の日時
let minDate = new Date();
minDate = minDate.setDate(minDate.getDate() + 1);
//今日から3ヶ月後の日時
let maxDate = new Date();
maxDate = maxDate.setMonth(maxDate.getMonth() + 3);
//日付をフォーマット YYYY-MM-DD
function formatDate(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const mm = ('00' + month).slice(-2);
const day = date.getDate();
const dd = ('00' + day).slice(-2);
return `${year}-${mm}-${dd}`;
}
async function flatpickrInit() {
// const holidays = await fetchHolidays();
flatpickr('.date', {
locale: 'ja',
dateFormat: 'Y.m.d（D）',
defaultDate: minDate,
minDate: minDate,
maxDate: maxDate,
enableTime: true,
minTime: '09:00',
maxTime: '18:00',
onDayCreate: (dObj, dStr, fp, dayElem) => {
// addHolidayClass(dayElem, holidays);
},
onChange: (selectedDates, dateStr, instance) => {
if (!selectedDates[0]) {
return;
}
//翌日
const tommorow = new Date();
tommorow.setDate(tommorow.getDate() + 1);
//2日後の日時
const twoDaysLater = new Date();
twoDaysLater.setDate(twoDaysLater.getDate() + 2);
//3日後の日時
const threeDaysLater = new Date();
threeDaysLater.setDate(threeDaysLater.getDate() + 3);
const dates = [
formatDate(tommorow),
formatDate(twoDaysLater),
formatDate(threeDaysLater)
];
const selectDate = this.formatDate(selectedDates[0]);
//翌日〜3日後は10::00〜20:00
if (dates.includes(selectDate)) {
instance.set('minTime', '10:00');
instance.set('maxTime', '20:00');
}
//日曜は13:00〜20:00
else if (selectedDates[0].getDay() === 0) {
instance.set('minTime', '13:00');
instance.set('maxTime', '20:00');
}
else {
instance.set('minTime', '09:00');
instance.set('maxTime', '18:00');
}
}
});
}
flatpickrInit();
</script>
</td>
</body>
</html>
ありがとうございます！
なんとか日曜日は選択不可、火曜・土曜日だけ選択時間変更ができるようになりました！
ちょっとおかしいところがある気もしますが、希望通り動いております！
参考に載せます。
<td class="yoyaku"><span class="b">ご希望の日時</span> <span class="sankou">必須</span></td>
<td>第1希望：<input type="text" class="date" name="your-data1"> ～
第2希望：<input type="text" class="date" name="your-data2"> ～
<script>
//翌日の日時
let minDate = new Date();
minDate = minDate.setDate(minDate.getDate() + 1);
//今日から3ヶ月後の日時
let maxDate = new Date();
maxDate = maxDate.setMonth(maxDate.getMonth() + 3);
//日付をフォーマット YYYY-MM-DD
function formatDate(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const mm = ('00' + month).slice(-2);
const day = date.getDate();
const dd = ('00' + day).slice(-2);
return `${year}-${mm}-${dd}`;
}
async function flatpickrInit() {
// const holidays = await fetchHolidays();
flatpickr('.date', {
locale: 'ja',
dateFormat: 'Y.m.d（D） H:i',
defaultDate: minDate,
minDate: minDate,
maxDate: maxDate,
enableTime: true,
minuteIncrement: 30,
minTime: '10:00',
maxTime: '19:00',
disable: [
function(date){
return (date.getDay() === 0 );
}
],
onDayCreate: (dObj, dStr, fp, dayElem) => {
// addHolidayClass(dayElem, holidays);
},
onChange: (selectedDates, dateStr, instance) => {
if (!selectedDates[0]) {
return;
}
const selectDate = this.formatDate(selectedDates[0]);
//火曜は10:00〜15:00
if (selectedDates[0].getDay() === 2) {
instance.set('minTime', '10:00');
instance.set('maxTime', '15:00');
}
//土曜は10:00〜16:00
else if (selectedDates[0].getDay() === 6) {
instance.set('minTime', '10:00');
instance.set('maxTime', '16:00');
}
else {
instance.set('minTime', '10:00');
instance.set('maxTime', '19:00');
}
}
});
}
flatpickrInit();
</td>
あなたの回答
tips
プレビュー
