jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

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

2014年12月8日
この記事は掲載から1684日経過しています。
情報が古い可能性が有りますのでご了承下さい

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

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

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

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

デフォルトの設定

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

サンプル

[js]
$(function(){
$(".mycld").myCalendar();
});
[/js]

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

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

サンプル

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

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

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

サンプル

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

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

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

サンプル

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

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

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

サンプル

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

 

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

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP