v-calendar(VueJS) 2版本DatePicker如何修改显示日期格式为YYYY-MM-DD

解决方案 #

model-config 中的 mask 配置仅控制 v-model 绑定值的输出格式，不会影响组件在页面上的输入框显示格式，显示格式需要单独配置组件根级的 mask 属性即可。

修改后的组件代码如下：

<DatePicker
  v-model="date"
  is-expanded
  is24hr
  :attributes="attrs"
  mask="YYYY-MM-DD"
  :model-config="{
    type: 'string',
    mask: 'YYYY-MM-DD HH:mm',
  }"
  mode="date"
>
</DatePicker>

如果需要全局统一所有DatePicker的显示格式，可以在项目入口初始化v-calendar时添加全局配置：

// main.js 相关配置
import Vue from 'vue'
import VCalendar from 'v-calendar'
import 'v-calendar/lib/v-calendar.min.css'

Vue.use(VCalendar, {
  masks: {
    input: 'YYYY-MM-DD'
  }
})

内容的提问来源于stack exchange，提问作者DFX Nguyễn