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

HTML上でカレンダーから複数の日付を選択したい

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

cr

タイトル通りですが、今やっている案件で、運行日をカレンダーから複数選択させたいというものが有りまして、datepickerの類は使えないですし、UIもちゃんとしたいと思い、書いてみました。

サンプルは送信すると選択した日付を表示しますのでお試しを。

サンプル

javascriptはこんな感じです。

設定

カレンダーはtableなので、それ関連のCSSを少し書く必要が有りますが、デフォルトはこんな感じでPOSTすると選択した日付が取得出来ます。

カレンダーを複数月に渡り表示したい

といった事も可能です。

サンプル

その他幾つか設定が有ります。

サンプルはPOSTさせていますが、選択した日付は隠しフォームに入るので、javascriptで取り出すのも容易だと思います。tableですが、この程度の幅だとスマートフォンでも大丈夫だと思います。

これはバスツアーの運行日を社内で設定するためのものなのですが、予約システムなどオープンな利用方法も良いかもしれませんね。

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

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

PAGE TOP