ロゴ
menu
HOME > ｊQuery・Javascript > デートピッカーを自作する – その２

デートピッカーを自作する – その２

以前こちらの記事で書いた記事のその後です。

jQuery.datepickerは素晴らしいライブラリで、フォームで日付を入力させたい時はこれに勝るカレンダーライブラリは無いと思います。しかし、jQuery.datepickerはページをロードした際に定義済みの場所にカレンダーを表示するため、jQueryで日付入力フォームを増減するようなケースだと期待した動作をしてくれません。

例えば旅行日程の入力フォームを無制限に増やせるようなケースです。この件に関しては上述したページに書いていますので詳しくは省きます。

以前作成したものは、受注した案件のために急遽作成したものですので低機能でした。これをより使えるものにしましたのでご紹介致します。

デフォルトの設定

とりあえずカレンダーを表示するだけです。

サンプル

$(function(){
   $(".mycld").myCalendar();
});

日本語化と日付フォーマット変更

曜日を日本語にし、入力される日付フォーマットを変更しています。

サンプル

$(function(){
   $(".mycld").myCalendar({
       week: ["日", "月", "火", "水", "木", "金", "土"]
      ,format:'yy-mm-dd' //yymmdd
   });
});

開始日と終了日を指定する

一定期間だけの日付を入力させたい場合などに。開始日はtodayにすると今日からになります。

サンプル

$(function(){
   $(".mycld").myCalendar({
       week: ["日", "月", "火", "水", "木", "金", "土"]
      ,format:'yy-mm-dd'
      ,start:'today'     //今日から開始の場合'today' 指定の場合は 'yyy-mm-dd'
      ,end:'2015-5-10'
   });
});

曜日や指定日をクリック不可にする

曜日でクリック不可にする場合は０～６(日曜を０として数えます) までの数値をカンマ区切りで指定します。特定の日だけをクリック不可にする場合は配列で直接指定します。このとき、１０未満の月と日には頭に０を付けます(例:2014年1月3日は 20140103)

サンプル

$(function(){
   $(".mycld").myCalendar({
       week: ["日", "月", "火", "水", "木", "金", "土"]
      ,format:'yy-mm-dd'
      ,holidayweek:'0,6'
      ,holiday:['20141218','20141223','20150105']
   });
});

ページにカレンダーをそのまま表示する

フォームへ入力させる為ではなく、ページにカレンダーをそのまま表示するケースです。CSSも大きめのカレンダーになるように調整しています。

サンプル

$(function(){
   $("#browse_calendar").myCalendar({
       week: ["日", "月", "火", "水", "木", "金", "土"]
      ,display:'browse'
      ,holidayweek:'0,4' //日曜と木曜
   });
});

 

とりあえずこのくらいあれば、たいていの要求仕様には対応出来ると思います。あと、日付の下に[満室]なんて文字を表示出来たら良いかもしれませんね。これも割と簡単だと思うので暇を見て。