[javascript] from-toで簡単選択できるカレンダーライブラリ

なかなか使いやすいライブラリが無い時は迷わず自分ですぐに作ることがモットーの、ユゲタです。 「カレンダー」とかけまして、 「オリンピックの聖火」と、ときます。 そのココロは・・・ 過ぎた日（火）は、もう戻りません・・・

カレンダーライブラリについて

WEBシステムを作る時に、何かと使うことになる日付の登録に、カレンダー機能は非常に便利な存在です。 HTML5で搭載されたinputタグのtype="date"機能は、それぞれのブラウザが独自にカレンダー表示をしたり、独自のインターフェイスで日付選択ができるようになりますが、 あまり便利に使えないというのが、利用者の正直な印象でしょう。 PCでのGoogleChromeブラウザは、↓このような表示になりますが、 iphoneのsafariでは、↓こうなります。 明らかにiPhoneのデフォルトカレンダー選択は使いづらくて仕方が有りません。 また、PCブラウザでは、カレンダー表示が便利に使えると考えがちですが、WEBデザイナーの人もinputタグのデザインに手が出せなくて、使いづらいと感じている人も少なくないはずです。

Guthubで配布中

どのブラウザでも同じ見た目と使い方でカレンダー機能で日付入力ができる、カレンダーライブラリをGuthubにアップしておきました。 https://github.com/yugeta/calendar PC画面 スマートフォン画面 どのブラウザでも同じ見た目、デザインでの表示ができるようになります。

今後の機能追加予定

実はこのカレンダー機能は、以前も作っていたものをバージョンアップさせたものなのですが、今回は、「from-to」という日付を期間選択できるrange機能と、ページ内にある複数の日付入力に対するフォームに対応させました。 期間選択は、特定日から数日の間の集計レポートを表示したい場合や、開始と終了のある日程などの日付選択の場合に一度の選択でできてしまうので、非常に便利に使えると思います。 企業の予約ページなどでも、このカレンダー機能を使った予約システムなども、想定して作っているので、他のシステム連携などのイベント設定も可能になっています。 また、今後のバージョンアップを予定している機能としては、 javascriptだけではなく、サーバーサイドでも使えるようにphp版の構築も考えています。 他にも、ajaxなどの利用で、自動的にdateフォームが生成されてしまうようなwebページで、いちいちそのたびにcalendarライブラリをnew宣言するのは、非常にめんどくさい作業になるので、ライブラリで対象の入力項目には自動的にイベントセットができるような機能も入れる予定です。 このように、スケジューリングの効率がアップするということは、自分のライフワークや、ビジネスにおける効率に直結するはずです。

これまでの記事

[Javascript] input name=”date”を使いたくない人の為のカレンダーライブラリ