Vue-flatpickr-component導入と日本語化

概要

日付と時刻を入力する必要があるVueシステムの作成にて。
chromeでは動いた<input type="datetime-local">君が、Firefoxでは、動作不十分だった。(時刻の入力フォームが出てこないため、時刻だけ手打ちになる)

これではダサいので、ブラウザに頼らない日時入力フォームを作ることになった。
選ばれたのはVue-flatpickr-componentでした…

当記事では筆者がつまづいた部分だけまとめています。

導入

まず、Vue V2.x を使っている場合、、読み込むバージョンをきちんと指定しないと動かない....。
こういう事ってライブラリにはよくあることなんですかね？

yarn派ですかnpm派ですか

yarn add vue-flatpickr-component@^8
npm install vue-flatpickr-component@^8

ソース　https://github.com/ankurk91/vue-flatpickr-component/issues/43

日本語化

これに関しては記事はいっぱいあるものの、やってることが分かりづらかった…
日本語化って何が変わるの？というのはまあ、Novemberが11月とかになる。

「こういうのの言語設定とかって、オプションのlangとかに"ja"とか入れるんでしょ？」

と、思うのだが、Vue-flatpickr-componentではこちら側で言語ファイルを、読み込んでそいつをオプションに渡してやる必要がある。なんでstringで渡さないんですかね....？

そして、ここがまた分かりづらいのだが、読み込むファイルは「node_modules/vue-flatpickr-component」内には無い。
Vue版をインストールすると付いてくる「node_modules/flatpickr/dist/l10n」内にある。

この中のja.jsを読み込む訳だが、ja.jsを見れば分かる通り、ja.jsではモジュールのエクスポートがそれぞれ、
*　名前付きエクスポート:Japanese
*　デフォルトエクスポート:ja
となっている。

つまり、名前付きエクスポートを使うのであれば{Japanese}にしないと読み込めない。
ここまでたどり着くのにnode_modules開かんとなのがもうさあ...と思ってしまう。

ここまでを踏まえた結果、こんな感じのコードになる。

dateTimeInput.vue

...
<flat-pickr v-model="flatdate" name="date" id="date" :config="flatOption"></flat-pickr>
<script>
import flatPickr from 'vue-flatpickr-component';
import {Japanese} from 'flatpickr/dist/l10n/ja.js';
import 'flatpickr/dist/flatpickr.css';

export default{
  components: {
    flatPickr
  },
  data:function(){
    return {
      flatOption:{
        locale: Japanese,
        enableTime: true,
        dateFormat: "Y-m-d H:i",
        time_24hr: true
      },
    }
  }
}

CSSは読み込むだけでいい感じになるが、土日色付けとかは自分でやらなきゃみたい。

おまけ：土日・祝日スタイル

style.css

@import 'flatpickr/dist/flatpickr.min.css';

// $red : #f00;
// $blue : #25bdcf;

.flatpickr-calendar .flatpickr-innerContainer {
    /* 日曜日：赤 */
    .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1),
    .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
        color: $red;
    }
    /* 土曜日：青 */

    .flatpickr-weekdays .flatpickr-weekday:nth-child(7),
    .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
        color: $blue;
    }
}

参考にしました。https://notes.sharesl.net/articles/1923/

祝日も色付けしたい場合は、またどこかから祝日のデータを引っ張ってきて解析して祝日用クラスを付与して....って感じでやります。

終わります。こういうぐだぐだって、だいたいstackOverFlowやgithubのライブラリissueに行かないと終わりませんよね...。

愚痴ばかりで失礼しました！！