jquery.datepicker

JavaScript

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

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

jquery.datepicker

デモ

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

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

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

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

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

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

jquery.datepicker

関連記事

  1. no-image

    JavaScript

    2枚の画像の違いを比較できるjQueryプラグイン「baSlider」

    baSliderはビフォー・アフターのような2枚の画像の違いを比較でき…

  2. lory

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

  3. imagelightbox

    JavaScript

    レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

    imagelightboxは、レスポンシブに対応したタッチフレンドリー…

  4. Simple Sidebar
  5. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP