flatpickr

JavaScript

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

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

flatpickr

デモ

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

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

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

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

flatpickr

関連記事

  1. JavaScript

    クリックで画像や要素にオーバーレイを表示させるjQueryプラグイン「Purplecoat.js」

    Purplecoat.jsはクリックすると画像や好きな要素にオーバーレ…

  2. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  3. no-image
  4. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

  5. JavaScript

    シンプルな構成で簡単に実装することができるツールチップ「jQuery PowerTip」

    とてもシンプルな構成で簡単に実装することができるjQueryプラグイン…

  6. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP