Monday, 31 July 2023

How to create a datepicker textfield using Vuetify 3?

I'm using Vuetify 3 and want to have a textfield acting as a datepicker. You can see an example in the Vuetify 2 docs https://v2.vuetifyjs.com/en/components/date-pickers/#dialog-and-menu

The Vuetify 3 docs don't have such an example yet https://vuetifyjs.com/en/components/date-pickers/

I started to prototype an example Playground

<template>
  <v-app>
    <v-container>
      <v-menu v-model="isMenuOpen" :close-on-content-click="false">
        <template v-slot:activator="{ props }">
          <v-text-field
            label="Selected date"
            :model-value="selectedDate"
            readonly
            v-bind="props"
          ></v-text-field>
        </template>
        <v-date-picker v-model="selectedDate"></v-date-picker>
      </v-menu>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const isMenuOpen = ref(false)
  const selectedDate = ref()
</script>

How can I remove all the redundant things from the datepicker? I only want to modify the ISO date, nothing else.



from How to create a datepicker textfield using Vuetify 3?

No comments:

Post a Comment