挨拶
こんにちは！株式会社ソニックムーブ 開発部フロントエンドユニット所属のchiakiです。
弊社では現在Nuxt3を使用したプロジェクトが多いのですが、Vuetify 3を組み合わせた場合にDate pickersコンポーネントで日付セルを変更するのに若干難儀したので、記事にまとめてみようと思います！
直面した問題
とある社内のプロジェクトで、日付入力にDate pickersを拡張したDate inputsコンポーネントを使用していました。
こちらは大変便利なのですが、特定の日付に対してアイコン表示をしたいような仕様があったのでDate pickersで提供されるAPIを調査していたところ、どうもallowed-dates（配列もしくは関数を引数に取り、条件に合致した日付以外がdisabledになる）しか見当たらず実現方法に困りました・・・。😭
<VDatePicker />がどうなっているか
tsxで書かれた本体を覗いてみると、VDatePickerHeader, VDatePickerControls, VDatePickerMonth, VDatePickerMonths, VDatePickerYearsのコンポーネントを利用していることがわかります。
この中で日付セルに関する表示や操作は、VDatePickerMonthのAPIに存在するdayスロットを利用すれば実現可能となります。
VDatePickerにはdefaultスロットが提供されているものの、コンポーネントの表示ロジックが特に実装されていないため利用不可となっていました。😭
簡単な実装例
こちらに簡単な実装例を示しました。
主に必要となる状態管理はcurrentDate, currentYear, currentMonth, viewModeの4つとなります。
-
VDatePickerControlsのクリックイベントハンドラでviewMode(年/月/日)を切り替え - 表示された年や月のクリックで
currentYear,currentMonthの値を更新 -
VDatePickerMonthで表示される日はcurrentDateで管理し、dayスロット内で条件分岐を使用して表示の制御を行う - 日付のスタイル自体は付与されるクラス名でcssを実装（
v-date-picker-month__day--week-start/end,.v-date-picker-month__day--selectedなどがある）
上記を念頭にコンポーネントを作成すると、公式提供のものを利用するのと遜色ないような実装を行うことが可能となります。
終わりに
UIコンポーネントライブラリは便利な反面、ヘッドレスライブラリでないものは自由度が下がるものが多いのが現状です。そんな中でもAPIの提供は多々あるので、諦めずにドキュメントを読んでいくのが解決の糸口となります。
最後までお読みいただきありがとうございました！
Discussion