flatpickr

JavaScript

超軽量で使い方もカンタンな日付ピッカー「flatpickr」

flatpickrはjQueryなどのライブラリに依存することなく動作する、超軽量な日付ピッカーです。バニラJavaScriptで記述されているとのこと。日付ピッカーのフラットなデザインもシンプルでとても見やすいですね。使い方もカンタンなところがいいと思います。

flatpickr

デモ

Try me…と書かれたボックスをクリックすると、ベーシックなタイプのサンプルが表示されます。すっきりしたフラットデザインの日付ピッカーがとても素敵です。ピッカー上部の左右にある矢印で、前後の月に切り替えることができます。特定の日付を選択すると、ボックス内にその値が入力されます。

ほかにも複数のピッカーを設置したり、入力される値のフォーマットを変更したり、いろいろとカスタマイズして使うことも可能です。

日付だけでなく、時間を指定するタイムピッカーとしても活用できるので、軽量ながらパワフルにさまざまなサイトで活用できるのではないでしょうか。

またオプションも、dateFormat、timeFormat、defaultDate、minDate、maxDate、disableなどなど、たくさんの項目が用意されているので、自サイトに合わせたカスタマイズをしたい方にもうれしいポイントだと思います。

flatpickr

Just Mobile AluCable Flat LightningケーブルフラットでファッショナブルなJust MobileのLightningケーブル(1.2m)前のページ

iOSスタイルのシンプルなチェックボックスを実装できる「Switch」次のページSwitch

関連記事

  1. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

  2. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

  3. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  4. Yet Another Ripple Plugin
  5. Switch

    JavaScript

    iOSスタイルのシンプルなチェックボックスを実装できる「Switch」

    Switchは、シンプルでパワフルなiOSスタイルのチェックボックスを…

  6. Rythim.js

    JavaScript

    音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」

    Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライ…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP