jquery.datepicker

JavaScript

未来的なデータピッカーを実装できる「jquery.datepicker」

jquery.datepickerはWeb用の未来的なデータピッカーを実装することができます。カレンダー内で開始する日を選択できたり、その日から任意の日までを選択した状態にできたりといったことが可能です。

jquery.datepicker

デモ

デモページを読み込むと、シンプルで見やすいカレンダーが表示されます。開始日(スタートデータ)には4日が指定されており、21日までが選択された状態になっています。

4日から21日までの範囲はグレーに色付けされているので、どこからどこまで選択しているのかを把握しやすいのがいいですね。

スタートデータは濃いグレーで、最後に選択したデータは緑で表示されます。シンプルなレイアウトとスッキリしたデザインのカレンダーにより、目的の日付を選択しやすいデータピッカーに仕上がっている印象です。

カレンダー上部の左右の矢印をクリックすれば、前後の月に手軽に移動することもできます。

また、API Referenceを利用すること多彩なカスタマイズもできるので、自サイトに合わせたデータピッカーを作り込みたい人にもうれしい仕様といえるのではないでしょうか?

というわけで、Web用として使う未来的なデータピッカーを実装したいという人は、ぜひ「jquery.datepicker」をチェックしてみてください。

jquery.datepicker

Building a Vertical Timeline With CSS and a Touch of JavaScriptレスポンシブに対応した垂直タイムライン「Building a Vertical Timeline With CSS and a Touch of JavaScript」前のページ

レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」次のページDropDownMenu

関連記事

  1. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

  2. jQuery Notebook
  3. jAnimate

    JavaScript

    フリップやバウンスなどのアニメーションを要素に実装できる「jAnimate」

    jAnimateはフリップやバウンスなどといったアニメーションを要素に…

  4. jQuery Tabs with Content Overlays
  5. jquery-base-slider
  6. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP