flatpickr

JavaScript

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

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

flatpickr

デモ

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

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

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

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

flatpickr

関連記事

  1. Tagify

    JavaScript

    Vanilla JSを用いた軽量のタグ入力機能を実装できる「Tagify」

    TagifyはVanilla JSを用いた軽量のタグ入力機能を実装でき…

  2. Ladda

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

  3. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

  4. stickUp2

    JavaScript

    スクロールしてもついてくるスティッキー実装「stickUp2」

    stickUp2はスクロールしてもついてくるシンプルなスティッキーを実…

  5. Shine

    JavaScript

    ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

    ShineというJavaScriptライブラリが素敵だったのでメモがて…

  6. PrognRoll

    JavaScript

    スクロールによるプログレスバーを表示できるjQueryプラグイン「PrognRoll」

    PrognRollはスクロールによるプログレスバーを表示することができ…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP