ここから本文です

datepickerに特定の日だけ色分けする方法が知りたいです。 初心者です。

mas********さん

2019/8/3119:00:03

datepickerに特定の日だけ色分けする方法が知りたいです。

初心者です。

現在クリニックのwebサイトにdatepickerでカレンダーを設置しており、
HolidayChk.jsを利用し日祝日は赤色(休診)、木土曜日は水色(午後休診)に設定しています。

時々イレギュラーで日祝以外の休診日があるため「var holidays = ['2019-00-00']; 」というのを入れて特定の日を赤色に設定するところまではできたのですが、
別に午後休診もイレギュラーの日があり、もう1色水色でも特定の日を設定できるようにしたいのですが、方法がわかりません。

ご存知の方いらっしゃいましたら、ご教授ください!


$(function(){

var holidays = ['2018-12-29', '2018-12-30', '2018-12-31', '2019-01-01', '2019-01-02', '2019-01-03', '2019-09-03']; //休診

$("#datepicker").datepicker({
beforeShowDay: function(date) {

// 祝日の判定
for (var i = 0; i < holidays.length; i++) {
var htime = Date.parse(holidays[i]); // 祝日を 'YYYY-MM-DD' から time へ変換
var holiday = new Date();
holiday.setTime(htime); // 上記 time を Date へ設定

// 祝日
if (holiday.getYear() == date.getYear() &&
holiday.getMonth() == date.getMonth() &&
holiday.getDate() == date.getDate()) {
return [true, 'holiday'];
}
}
var result;
var dd = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
var hName = ktHolidayName(dd);
if(hName != "") {
result = [true, "date-holiday", hName];
} else {
switch (date.getDay()) {
case 0: //日曜日
result = [true, "date-holiday"];
break;
case 6: //土曜日
result = [true, "date-saturday"];
break;
case 4 : //木曜日
result = [true, "date-saturday"];
break;
default:

result = [true];
break;
}
}
return result;
},


onSelect: function(dateText, inst) {
alert(dateText);
}
});
});

閲覧数:
35
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

awk********さん

2019/9/218:33:38

整理すればもっと簡潔に書けますが、今のコードを最大限活かすなら、
まず holidays と同様に午後休診日を以下のように定義しましょう。
//---------------------------------------------------------
var halfholidays = ['2019-09-04','2019-09-11']; //午後休診
//---------------------------------------------------------

あとは holidays と同様の判定処理を halfholidays に対しても書けばよいです。
例えば以下のように。
//---------------------------------------------------------
// 午後休診日の判定
for (var i = 0; i < halfholidays.length; i++) {
var htime = Date.parse(halfholidays[i]); // 'YYYY-MM-DD' から time へ変換
var holiday = new Date();
holiday.setTime(htime); // 上記 time を Date へ設定

// 祝日
if (holiday.getYear() == date.getYear() &&
holiday.getMonth() == date.getMonth() &&
holiday.getDate() == date.getDate()) {
return [true, 'date-saturday'];
}
}
//---------------------------------------------------------

質問した人からのコメント

2019/9/6 14:31:39

ありがとうございます!
教えていただいたものを加えたら無事問題、解決致しました。

本当に助かりました。
ありがとうございました。

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる