日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker
Post on:2020年4月3日
sponsors
デスクトップでもスマホでもタブレットでも動作し、フレームワークの有無に関係なく機能する、日付・時間のピッカーを簡単に実装できるわずか5Kbの軽量JavaScriptを紹介します。
依存関係は一切なく、単独のWebコンポーネントとして利用できるので、非常に便利です。日本語環境のフォーマットにも対応しています。
Aeon Date Pickerの特徴
Aeon Date Pickerは、単独のWebコンポーネントとして構築されたどこにでも使用できる軽量の日付・時間のピッカーです。
-
- 依存関係はなし
- スタンドアロンの単体で動作する軽量JavaScriptで実装されたWebコンポーネント。
-
- どこにでも使用できる
- どんなページにもどんなフレームワークにも設置可能。
-
- プログレッシブエンハンスメント
- コードの読み込みに失敗した場合は、ネイティブのピッカーまたはテキストボックスにフォールバック。
-
- アクセシブル
- マウス・タッチ・キーボード・スクリーンリーダーで動作し、ネイティブのフォーム要素として動作します。
-
- 多言語対応
- デフォルトでブラウザのローカル言語と日付形式を使用します。
-
- テーマ
- カスタムカラースキームが用意されています。
-
- ブラウザーサポート
- すべてのデバイスのすべてのモダンブラウザで動作します（IE11はポリフィルを使用）。
-
- ライセンス
- MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。
Aeon Date Pickerのデモ
デモではAeon Date Pickerの動作を確認できます。
日付と時間の形式はユーザーの環境を参照して表示させるので、日本語環境でも問題なく利用できます。
IE11もサポートされています。
オプションも豊富で、日時のフォーマットやピッカーのデザインを変更できます。
Aeon Date Pickerの使い方
インストール
npmを使用してインストールします。
|
1 |
npm install --save @lamplightdev/aeon |
もしくは、直接参照します。
|
1 |
<script src="https://unpkg.com/@lamplightdev/aeon"> |
使い方
ESMモジュールを使用している場合、Aeonをコードに直接インポートするだけです。
|
1 2 3 4 5 |
// if you're using a bundler that resolves node_modules import '@lamplightdev/aeon'; // if you're using a bundler that doesn't resove node_modules import 'path/to/node_modules/@lamplightdev/aeon/src/aeon.js'; |
scriptタグにAeonをインクルードします。
|
1 |
<script type="module" src="https://unpkg.com/@lamplightdev/aeon"></script> |
ES5版も用意されています。
|
1 |
<script src="https://unpkg.com/@lamplightdev/aeon/dist/aeon-es5.js"></script> |
HTML
あとは、HTMLで<aeon-datepicker>タグを使用して、日付や時間のinput要素をラップします。
|
1 2 3 4 5 6 7 8 9 10 |
<label for="date">Start date</label> <aeon-datepicker> <input type="date" id="date" name="date" value="2020-03-20" /> </aeon-datepicker> <aeon-datepicker> <input type="date" id="date" name="date" value="2020-03-20" /> <input type="time" id="time" name="time" value="05:19" /> </aeon-datepicker> |
sponsors
