デートピッカーを自作する – その２
以前こちらの記事で書いた記事のその後です。
jQuery.datepickerは素晴らしいライブラリで、フォームで日付を入力させたい時はこれに勝るカレンダーライブラリは無いと思います。しかし、jQuery.datepickerはページをロードした際に定義済みの場所にカレンダーを表示するため、jQueryで日付入力フォームを増減するようなケースだと期待した動作をしてくれません。
例えば旅行日程の入力フォームを無制限に増やせるようなケースです。この件に関しては上述したページに書いていますので詳しくは省きます。
以前作成したものは、受注した案件のために急遽作成したものですので低機能でした。これをより使えるものにしましたのでご紹介致します。
デフォルトの設定
とりあえずカレンダーを表示するだけです。
1 2 3 | $(function(){ $(".mycld").myCalendar();}); |
日本語化と日付フォーマット変更
曜日を日本語にし、入力される日付フォーマットを変更しています。
1 2 3 4 5 6 | $(function(){ $(".mycld").myCalendar({ week: ["日", "月", "火", "水", "木", "金", "土"] ,format:'yy-mm-dd' //yymmdd });}); |
開始日と終了日を指定する
一定期間だけの日付を入力させたい場合などに。開始日はtodayにすると今日からになります。
1 2 3 4 5 6 7 8 | $(function(){ $(".mycld").myCalendar({ week: ["日", "月", "火", "水", "木", "金", "土"] ,format:'yy-mm-dd' ,start:'today' //今日から開始の場合'today' 指定の場合は 'yyy-mm-dd' ,end:'2015-5-10' });}); |
曜日や指定日をクリック不可にする
曜日でクリック不可にする場合は０～６(日曜を０として数えます) までの数値をカンマ区切りで指定します。特定の日だけをクリック不可にする場合は配列で直接指定します。このとき、１０未満の月と日には頭に０を付けます(例:2014年1月3日は 20140103)
1 2 3 4 5 6 7 8 | $(function(){ $(".mycld").myCalendar({ week: ["日", "月", "火", "水", "木", "金", "土"] ,format:'yy-mm-dd' ,holidayweek:'0,6' ,holiday:['20141218','20141223','20150105'] });}); |
ページにカレンダーをそのまま表示する
フォームへ入力させる為ではなく、ページにカレンダーをそのまま表示するケースです。CSSも大きめのカレンダーになるように調整しています。
1 2 3 4 5 6 7 | $(function(){ $("#browse_calendar").myCalendar({ week: ["日", "月", "火", "水", "木", "金", "土"] ,display:'browse' ,holidayweek:'0,4' //日曜と木曜 });}); |
とりあえずこのくらいあれば、たいていの要求仕様には対応出来ると思います。あと、日付の下に[満室]なんて文字を表示出来たら良いかもしれませんね。これも割と簡単だと思うので暇を見て。
