問題
jQuery UI Datapickerの「jquery.holiday.js」で祝日を追加するには？
解決策
Datepickerの設定で「$('日付用のテキストフィールド').datepicker({ オプション: 設定 }).holiday({ 'anniversary': [ {'date':"Ymd（年4桁、月2桁[0埋め]、日2桁[0埋め]）", 'name':"休日の名称"} ] });」と記述することで、祝日を追加できます。
カレンダーで祝日を追加する。
jQuery UI Datapickerの「jquery.holiday.js」で祝日を追加する方法をご紹介します。
jQuery UI Datapickerのカレンダーを表示する方法、祝日を反映させる方法を過去の記事で紹介していますので、ぜひこちらもご覧ください。
jQuery UIのDatepickerでフォームの日付入力をカレンダー選択にする
jQuery UI Datapickerのカレンダーで祝日を選択できないようにする
DEMOはこちら
- ※入力フィールドの隣のアイコンをクリックすると、カレンダーが表示されます。
- ※カレンダーの日付を選択すると、入力フィールドにその日付が表示されます。
「anniversary」に日付を追加する。
「holiday()」内の「anniversary」に日付を追加します。
if($('form .input-text.cal').length){
$('form .input-text.cal').prop('readonly',true);
$('form .cal-icon').click(function(){
event.preventDefault();
$(this).closest('form').find('.input-text.cal').datepicker({
dateFormat: "yy年m月d日"
}).holiday({
'anniversary': [
{'date':"20200612", 'name':"休日"},
{'date':"20200615", 'name':"休日"},
{'date':"20200616", 'name':"休日"},
{'date':"20200617", 'name':"休日"},
{'date':"20200618", 'name':"休日"},
{'date':"20210101", 'name':"年末休日"},
{'date':"20210102", 'name':"年末休日"}
]
});
$(this).closest('form').find('.input-text.cal').datepicker("show");
});
};ポイント!
Datepickerの設定で「$(‘日付用のテキストフィールド’).datepicker({ オプション: 設定 }).holiday({ ‘anniversary’: [ {‘date’:”Ymd（年4桁、月2桁[0埋め]、日2桁[0埋め]）”, ‘name’:”休日の名称”} ] });」と記述することで、祝日を追加できます。
参照
以下のサイトが、より詳しく解説してくれています。
【祝祭日のオプション指定 – lab – Dolphy Software】
http://www.dolphy.gr.jp/lab/holiday/index.html#section-2
コメント