[Vuejs]-Component VDatepicker from VCalendor not showing date in V-TextField – VueJS

by

1👍

The problem should be shown in your console. At least it’s clearly shown to me when I run your code

The specified value "07/14/2023" does not conform to the required format, "yyyy-MM-dd".

And this issue repeats with every date value. The wording is clear though, the inputValue from VDatePicker does not match the format expected by the v-text-field. You just need to convert to the expected format

function format(val) {
  if (!val) return
  return new Date(val).toISOString().split('T')[0] // returns val in yyyy-mm-dd date format
}

<VDatePicker v-model="date">
  <template #default="{ inputValue, inputEvents }">
    <v-text-field
      type="date"
      :value="format(inputValue)"
      variant="outlined"
      density="compact"
      label="Data Inicial"
      v-on="inputEvents"
    ></v-text-field>
  </template>
</VDatePicker>
👤yoduh

Leave a comment