コミートム合同会社

コミートム合同会社

VuetifyのDatepickerを使ってみる

Vuetify Datepicker Datepicker This article is about how to use Vuetify's Datepicker. The author provides detailed instructions on how to set up and use the Datepicker.
by JanitorOct 04, 2023
VuetifyのDatepickerAPI「v-date-picker」を触ってみました。少し変更するだけで様になるデザインですね。

Jump Links

1. Vuetifyのバージョンの確認
2. v-date-pickerを使うための設定
3. スクリプトを書く
1. Vuetifyのバージョンの確認
v3.3.4以上が必要になるようです。 参考にさせて頂いたウェブサイトURL https://vuetifyjs.com/en/components/date-pickers/
2. v-date-pickerを使うための設定
v-date-pickerは「Labs components」に該当するため、マニュアルインポートとインストールが必要とのことです。今回は、Nuxt3の環境なので、pluginsフォルダ内のtsファイルで下記のように、インポートを行いました。
import { createVuetify } from 'vuetify' import * as components from 'vuetify/components' import * as directives from 'vuetify/directives' import { VDatePicker } from 'vuetify/labs/VDatePicker' export default defineNuxtPlugin(nuxtApp => { const vuetify = createVuetify( { ssr: true, components: { VDatePicker, }, directives, } ) nuxtApp.vueApp.use(vuetify) })
3. スクリプトを書く
タイトル、背景色、文字色、文字の太さ、キーボードからの入力時のplaceholderを設定しています。
<script setup> var selectedDate = reactive( { value: "" } ); watch( () => selectedDate.value, ( to, from ) => { var date = new Date( selectedDate.value ); console.log( date.getTime() ); }); </script> <template> <v-date-picker class="datePickerTest" color="#B83C50" v-model="selectedDate.value" title="v-date-picker API Try" input-placeholder="MM/dd/yyyy"> </v-date-picker> </template> <style> .datePickerTest .v-picker__body{ background-color: #FFDBE1; color: #B91C13; font-weight: bold; } .datePickerTest .v-picker__actions{ background-color: #FFDBE1; } </style>
下の画像の表示になります。

Editors pick

Our other articles
© 2023 - Comytom LLC