フォームの日付入力を簡単にするJS (flatpickr)

フォームの日付入力を簡単にするJS (flatpickr) WEBデザイン

入力フォームの日付を簡単にカレンダーから選択できるようにするには「flatpickr」がとても便利です。

設置が簡単なうえに一瞬で入力フォームのクオリティが一気に高まるので日付の入力補助系のJSの中では一番オススメです。

さっそく設置方法を解説します。

スポンサーリンク

設置方法

設置は非常に簡単です。

まず<head>~</head>内でCSSを読み込み

入力フォームにID(又はクラス名)を付与
※テストでID名を「calendarTEST」にしています。

</body>直前に以下のJavascriptを挿入

これだけで終了です。

See the Pen yGQQMO by Ketsunosuke (@onoredekaiketsu) on CodePen.

スポンサーリンク

カスタマイズ

色変更

テーマのCSSを読み込むだけで色変更が完了します。
「flatpickr.min.css」を読み込んだCSSの行の下にお好きな色のCSSを追加してください。

flatpickrのカラーパターン一覧

入力方法のカスタマイズ例

入力方法はさまざまなカスタマイズが可能ですが、コピペですぐに使える代表的なカスタマイズ例を紹介します。

キーボード入力も可能にする

時間も入力に可能にする

時間のみの入力

今日以前を選択不可

今日以降を選択不可

期間指定

複数の日付入力

日付の範囲入力

その他、たくさんのオプションがあります。

基本的にID(又はクラス名)を指定した後に、カンマ区切りでオプションを羅列していくだけでどんどん機能が追加できます。

もっとカスタマイズしたい方は公式サイトのマニュアルをご覧ください。

【flatpickr公式サイト】
https://flatpickr.js.org/

flatpickr公式サイト

入力作業というのは何気に結構ストレスがかかるので、コンバージョン率を高めるには「入力はサクサク気持ち良く」。これが大前提。

flatpickrで気持ち良い入力フォームを作成しましょう。