ホームページ » ウェブデザイン » Flatpickrを使用して最小限の日時入力選択を作成する

    Flatpickrを使用して最小限の日時入力選択を作成する

    作成するのが最も難しいフィールドの1つです。 日付/時刻を選択. 開発者は月/日/年の簡単な選択メニューに頼るか、仕事をするために様々なプラグインに頼ります.

    選択フィールドはうまく機能しますが、少し不格好です。代わりに、あなたはあなたのフォームを次のようにジャズアップすることができます。 Flatpickrプラグイン. それは 依存関係のない無料のオープンソースJavaScriptカレンダーピッカー.

    そうだった ミニマリズムを念頭に置いて設計されています, だからそれはあらゆるWebサイトのレイアウト、あらゆるWebフォームに収まることができ、そしてどんな近代的な装置からも使えるはずです.

    このプラグインの良いところは、 さまざまなカスタムオプション. テキストフィールドの日付の表示方法とカレンダーの開始位置を変更できます(デフォルトは “今日”).

    しかし、あなたもできる 厳密に日付ピッカーとして使用する 時間を選択する必要がない場合これは、この1つのピッカーを使ってフォームを介してより多くのデータを渡すことを可能にする単なるオプション機能です.

    を見てください。 例のページ Flatpickrの動作を見る.

    あなたもすることができます ターゲットを絞ったオプションを設定する 次のように、日付ピッカーの動作を制限します。

    • 特定の日付/範囲を許可しない
    • 特定の日付/範囲のみを許可する
    • 複数の日付選択を許可する
    • “レンジモード” 開始日と終了日を選択する
    • 日付ピッカーだけ、または時間だけ、または日付と時間の両方を一緒に

    オプションは事実上無限であり、それらはすべてこの1つのバニラJavaScriptプラグインを通して機能します.

    モバイルユーザーはネイティブの日付選択を好むことがよくありますが、できます。 これをJavaScriptのモバイル設定で上書きします. これにより、すべてのデバイスで同じインターフェースを使用できます。.

    そして、あなたもすることができます polyfillでIE9サポートを追加する これは、最もよくサポートされている日付ピッカープラグインの1つです。.

    インストールは簡単です npm、Bower、Yarnのコマンド. または、ソースファイルをダウンロードすることもできます GitHubから直接 あなたがそのルートを好む場合.

    あなたが知る必要があるすべてはあなたを示すセットアップページで見つけることができます ヘッダにファイルを追加する方法どのフィールドでこの日付ピッカーを呼び出すか. どのデザインにも合うように設計された、簡単に設計された、最高の日付ピッカープラグインの1つ.