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

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

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

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

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

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

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

デフォルトの設定

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

サンプル

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

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

サンプル

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

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

サンプル

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

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

サンプル

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

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

サンプル

 

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

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

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

PAGE TOP