jquery.datepicker

JavaScript

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

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

jquery.datepicker

デモ

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

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

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

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

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

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

jquery.datepicker

関連記事

  1. Trunk.js

    JavaScript

    滑らかなスライド表示がいい!レスポンシブなナビゲーションメニュー「Trunk.js」

    Trunk.jsはレスポンシブに対応したナビゲーションメニューを実装す…

  2. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

  3. no-image

    JavaScript

    レスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」

    jquery.alertはレスポンシブに対応したモーダルウィンドウ風の…

  4. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  5. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  6. simplePagination.js

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP