date-pickerライブラリ「flatpickr」



シンプルで洒落たカレンダー「flatpickr」にたどり着きました

(2018/11/26 更新) デモをCodePenで公開しました。

(2018/12/01 更新) 「土日に色を付ける」を追記しました。

 

公式サイトはこちら
説明が英語なので、オプションの設定方法等が分かりづらかったのでメモ。

 

基本的な利用方法

予め、jQueryとflatpickrを読み込みます

 

その後は、inputタグにトリガーとなる任意のクラス名やID名を設定

 

scriptでトリガーとなるクラス名等を設定し、flatpickrを初期化

 

以下の様にカレンダーを表示することができます。

See the Pen flatpickr by s_fuji (@s_fuji) on CodePen.

 

オプションの利用方法

オプションは以下の様な形で定義します。
デフォルトは「yyyy-MM-dd」形式で表示されますが、「yyyy/MM/dd」形式で表示することができます。

See the Pen flatpickr-option by s_fuji (@s_fuji) on CodePen.

 

日本語化対応

日本語化のライブラリを読み込みます。

 

オプションで「”locale”: “ja”」を設定することでカレンダー上部の月表示を日本語化することができます。

See the Pen flatpickr-japanese by s_fuji (@s_fuji) on CodePen.

 

土日に色を付ける

CSSで色を付ける設定内容です。

See the Pen flatpickr_saturday_Sunday_color by s_fuji (@s_fuji) on CodePen.

最後まで読んでいただきありがとうございました^^

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL