Flatpickrを使用して最小限の日時入力選択を作成する
作成するのが最も難しいフィールドの1つです。 日付/時刻を選択. 開発者は月/日/年の簡単な選択メニューに頼るか、仕事をするために様々なプラグインに頼ります.
選択フィールドはうまく機能しますが、少し不格好です。代わりに、あなたはあなたのフォームを次のようにジャズアップすることができます。 Flatpickrプラグイン. それは 依存関係のない無料のオープンソースJavaScriptカレンダーピッカー.
そうだった ミニマリズムを念頭に置いて設計されています, だからそれはあらゆるWebサイトのレイアウト、あらゆるWebフォームに収まることができ、そしてどんな近代的な装置からも使えるはずです.
このプラグインの良いところは、 さまざまなカスタムオプション. テキストフィールドの日付の表示方法とカレンダーの開始位置を変更できます(デフォルトは “今日”).
しかし、あなたもできる 厳密に日付ピッカーとして使用する 時間を選択する必要がない場合これは、この1つのピッカーを使ってフォームを介してより多くのデータを渡すことを可能にする単なるオプション機能です.
を見てください。 例のページ Flatpickrの動作を見る.
あなたもすることができます ターゲットを絞ったオプションを設定する 次のように、日付ピッカーの動作を制限します。
- 特定の日付/範囲を許可しない
- 特定の日付/範囲のみを許可する
- 複数の日付選択を許可する
- “レンジモード” 開始日と終了日を選択する
- 日付ピッカーだけ、または時間だけ、または日付と時間の両方を一緒に
オプションは事実上無限であり、それらはすべてこの1つのバニラJavaScriptプラグインを通して機能します.
モバイルユーザーはネイティブの日付選択を好むことがよくありますが、できます。 これをJavaScriptのモバイル設定で上書きします. これにより、すべてのデバイスで同じインターフェースを使用できます。.
そして、あなたもすることができます polyfillでIE9サポートを追加する これは、最もよくサポートされている日付ピッカープラグインの1つです。.
インストールは簡単です npm、Bower、Yarnのコマンド. または、ソースファイルをダウンロードすることもできます GitHubから直接 あなたがそのルートを好む場合.
あなたが知る必要があるすべてはあなたを示すセットアップページで見つけることができます ヘッダにファイルを追加する方法 & どのフィールドでこの日付ピッカーを呼び出すか. どのデザインにも合うように設計された、簡単に設計された、最高の日付ピッカープラグインの1つ.