日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker

デスクトップでもスマホでもタブレットでも動作し、フレームワークの有無に関係なく機能する、日付・時間のピッカーを簡単に実装できるわずか5Kbの軽量JavaScriptを紹介します。

依存関係は一切なく、単独のWebコンポーネントとして利用できるので、非常に便利です。日本語環境のフォーマットにも対応しています。

サイトのキャプチャ

Aeon Date Picker -GitHub

Aeon Date Pickerの特徴

Aeon Date Pickerは、単独のWebコンポーネントとして構築されたどこにでも使用できる軽量の日付・時間のピッカーです。

デモのキャプチャ
  • 依存関係はなし
    スタンドアロンの単体で動作する軽量JavaScriptで実装されたWebコンポーネント。
  • どこにでも使用できる
    どんなページにもどんなフレームワークにも設置可能。
  • プログレッシブエンハンスメント
    コードの読み込みに失敗した場合は、ネイティブのピッカーまたはテキストボックスにフォールバック。
  • アクセシブル
    マウス・タッチ・キーボード・スクリーンリーダーで動作し、ネイティブのフォーム要素として動作します。
  • 多言語対応
    デフォルトでブラウザのローカル言語と日付形式を使用します。
  • テーマ
    カスタムカラースキームが用意されています。
  • ブラウザーサポート
    すべてのデバイスのすべてのモダンブラウザで動作します(IE11はポリフィルを使用)。
  • ライセンス
    MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。

Aeon Date Pickerのデモ

デモではAeon Date Pickerの動作を確認できます。
日付と時間の形式はユーザーの環境を参照して表示させるので、日本語環境でも問題なく利用できます。

デモのキャプチャ

デモページ: Basic

IE11もサポートされています。

デモのキャプチャ

デモページ: IE11サポート

オプションも豊富で、日時のフォーマットやピッカーのデザインを変更できます。

デモのキャプチャ

デモページ: オプション

Aeon Date Pickerの使い方

インストール

npmを使用してインストールします。

もしくは、直接参照します。

使い方

ESMモジュールを使用している場合、Aeonをコードに直接インポートするだけです。

scriptタグにAeonをインクルードします。

ES5版も用意されています。

HTML

あとは、HTMLで<aeon-datepicker>タグを使用して、日付や時間のinput要素をラップします。

sponsors

top of page

©2020 coliss