問題 × 解決策

jQuery UI Datapickerの「jquery.holiday.js」で祝日を追加する

問題

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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

3 × three =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧