こんにちは、なつまるです。
最近寒くなってきましたね。

突然ですが、みなさんは日付ピッカーに何のライブラリを使用していますか?

私は「flatpickr」一択です。
まあ、新規とか提案の時だけなんですが。。

今回は、flatpickrを使用している人、これから使う予定がある人必見!
flatpickrを日本語化する記事です。

・日曜日始まりにしたい(曜日始まりを変更したい)
・土日だけ文字色を変更したい

と思ってる方にぴったりの記事です。
ソースコードもあるので、ぜひお読みください★

flatpickrとは?

flatpickrとは、日付ピッカーの軽量ライブラリのことです。
日付のほかにも時間だけ、という時間ピッカーも可能です。
(今回は日付の日本語化の紹介のみですが)

軽量というのがステキですね。
基本的なオプションはキチンと揃っているし、設定も簡単なのでおすすめ。
あと見た目がシンプルで良い。

jQueryがあってもなくても動くらしいですが、単体で使用したことないので断言できません。
今回はjQueryありでのソースです。

 

設置方法

今回は日本語化の紹介のため、省略します。
【flatpickr cdn 設置】とgoogleで検索すればゴロゴロ出てきます。

 

日本語化

公式から日本語化ライブラリが出てますので読み込みます。

 

 

そして、detapickrのオプションにlocalオプション追加。

 

リロードすれば、こんな感じになります。

日本語になりましたね!

 

が、ひとつ問題発生。。。
私知らなかったんですが、日本語にすると月曜日始まりになるんですね。

日曜日始まりにするため
公式に書いている「firstDayOfWeek」オプションを0に設定したが効かない

【detapickr 日本語 日曜日始まり】で検索してもなかなか記事が出ない。

 

分からへん・・・なんで出来へんの・・・(泣)

 

ということで公式サイトをきちんと読みます。(先に読めよ)

You may also wish to modify only certain values of locale. For instance, to set the first day of the week to Monday:

flatpickr.l10ns.default.firstDayOfWeek = 1; // Monday

公式引用

なるほど。
localを指定すると、firstDayOfWeekオプションが普通に使えなくなるのか。。

 

ということで

結果、

んんん~~~????効いてない???なんで???

はい。ダメでした

 

 

もういいよ、ソースから追いかけるから(怒)(怒)(怒)
とja.jsを読んでいると、めちゃくちゃバカすぎる勘違いをしていることに気が付く、、、

あ、なるほど。defaultは変数なのね。(照)

 

ということで、先ほどのソースの【default】を【ja】に変更すると、、、、

動いた。公式の言う通りだった。

ということで、最終的なjsファイルは下記の通り。

簡潔。。。ステキ。

 

ついでに土日のカラーを変更する

上記で、だいぶ日本のカレンダーらしく見えますよね。

cssに下記を追加してください。

ちなみに月曜日始まりの場合は下記の通り。

 

まとめ

日付ピッカーのライブラリは色々ありますが、個人的にはflatpickrが一番好きです。

いろんな方のブログを読んでいるとflatpickrおすすめ、と紹介されていたので
これから定番になるかもしれないですね。

もし使う機会があればぜひ参考にして頂ければ幸いです!

ちなみに、私はlaravelに導入しました。

 

そのうちlaravelの記事も書きたいなあ。

 

おしまい。

まとめ

SHARE

なつまる
TEXT BY なつまる

RECOMMENDED POSTこの記事もおすすめ!