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」を触ってみました。少し変更するだけで様になるデザインですね。
VuetifyのDatepickerAPI「v-date-picker」を触ってみました。少し変更するだけで様になるデザインですね。
Jump Links
1. Vuetifyのバージョンの確認
2. v-date-pickerを使うための設定
3. スクリプトを書く
1. Vuetifyのバージョンの確認
1. Vuetifyのバージョンの確認
v3.3.4以上が必要になるようです。
参考にさせて頂いたウェブサイトURL
https://vuetifyjs.com/en/components/date-pickers/
v3.3.4以上が必要になるようです。
参考にさせて頂いたウェブサイトURL
https://vuetifyjs.com/en/components/date-pickers/
2. v-date-pickerを使うための設定
2. v-date-pickerを使うための設定
v-date-pickerは「Labs components」に該当するため、マニュアルインポートとインストールが必要とのことです。今回は、Nuxt3の環境なので、pluginsフォルダ内のtsファイルで下記のように、インポートを行いました。
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)
})
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. スクリプトを書く
3. スクリプトを書く
タイトル、背景色、文字色、文字の太さ、キーボードからの入力時のplaceholderを設定しています。
タイトル、背景色、文字色、文字の太さ、キーボードからの入力時の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>
<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>
下の画像の表示になります。
下の画像の表示になります。
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」を触ってみました。少し変更するだけで様になるデザインですね。
VuetifyのDatepickerAPI「v-date-picker」を触ってみました。少し変更するだけで様になるデザインですね。
Jump Links
1. Vuetifyのバージョンの確認
2. v-date-pickerを使うための設定
3. スクリプトを書く
1. Vuetifyのバージョンの確認
1. Vuetifyのバージョンの確認
v3.3.4以上が必要になるようです。
参考にさせて頂いたウェブサイトURL
https://vuetifyjs.com/en/components/date-pickers/
v3.3.4以上が必要になるようです。
参考にさせて頂いたウェブサイトURL
https://vuetifyjs.com/en/components/date-pickers/
2. v-date-pickerを使うための設定
2. v-date-pickerを使うための設定
v-date-pickerは「Labs components」に該当するため、マニュアルインポートとインストールが必要とのことです。今回は、Nuxt3の環境なので、pluginsフォルダ内のtsファイルで下記のように、インポートを行いました。
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)
})
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. スクリプトを書く
3. スクリプトを書く
タイトル、背景色、文字色、文字の太さ、キーボードからの入力時のplaceholderを設定しています。
タイトル、背景色、文字色、文字の太さ、キーボードからの入力時の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>
<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>
下の画像の表示になります。
下の画像の表示になります。