如何在 Vuetify 文本字段中更改 type=date 的时间戳格式

Posted 2023-02-23

【中文标题】如何在 Vuetify 文本字段中更改 type=date 的时间戳格式

【英文标题】：How to change timestamp format of type=date in Vuetify text field

【发布时间】：2020-01-03 02:52:05

【问题描述】：

我正在尝试使用 type="date" 的 Vuetify 文本字段将开始和结束日期绑定到 Vue.js 组件。默认情况下，日期格式返回为 MM-DD-YYYY。但是我需要以 YYYY-MM-DD 格式返回日期。如何配置这些字段的日期类型以返回为 YYYY-MM-DD。这是我当前领域的设置：

<v-text-field v-model="start" type="date" label="start"></v-text-field>
<v-text-field v-model="end" type="date" label="end"></v-text-field>

感谢您的反馈！

【问题讨论】：

How to change Vuetify calendar date format的可能重复

【参考方案1】：

你可以使用 vuetify 日期选择器

<v-menu
    v-model="startDtMenu"
    :close-on-content-click="false"
    :nudge-right="40"
    transition="scale-transition"
    offset-y
    min-
    >
    <template v-slot:activator=" on ">
      <v-text-field
        :value="dayjs(start).format('YYYY-MM-DD')"
        label="Work Date*"
        readonly
        dense
        v-on="on"
        ></v-text-field>
    </template>
    <v-date-picker v-model="start" @input="startDtMenu= false"></v-date-picker>
</v-menu>

并且可以在数据属性中定义

data()
  return
   startDtMenu: false,
   start: '',