如何更改 vuetify datepicker 接受日期格式

Question

我从 API 收到一个日期，它是这样的字符串

2021-11-18T12:57:22.177

我用 Vuetify 日期选择器v-modeled这个

<v-menu
  v-model="date_picker"
  :close-on-content-click="false"
  :nudge-right="40"
  transition="scale-transition"
  offset-y
  min-width="auto"
>
  <template v-slot:activator="{ on, attrs }">
    <!-- v-validate="{ required: r.count > 0 }"
  :error-messages="errors.collect(r.title)" -->
    <v-text-field
      :name="s.title"
      :value="converDate(s.expierDate)"
      label="expierDate"
      dense
      prepend-icon="mdi-calendar"
      readonly
      v-bind="attrs"
      v-on="on"
    ></v-text-field>
  </template>
  <v-date-picker
    v-model="s.expierDate"
    @input="date_picker = false"
  ></v-date-picker>
</v-menu>

但是，日期选择器不接受这种格式。我能做什么？

Answer 1

添加 computed 以返回您的日期的 ISO 字符串，并且仅返回第一个 10 字符，因此您最终会得到 2021-11-18，如下所示：

computed: {
  isoDate() {
    return new Date(this.s.expierDate).toISOString().substr(0,10);
  }
}

（附注你拼错了expire。）

另外需要注意的是，从您的代码 sn-p 中不清楚 s.expierDate 是什么，因此如果没有一些小的调整，上面的计算可能无法工作，但逻辑仍然适用。

然后在您的模板中v-model="isoDate"。

这是我快速拼凑的一个通用示例（在“整页”中查看，所以看起来并不奇怪）：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      picker: new Date('1989-07-28').toISOString().substr(0, 10),
    };
  },
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-date-picker v-model="picker"></v-date-picker>
    </v-row>
  </v-app>
</div>

Here is a fiddle如果你想玩的话