如何结合vee-validate V4使用datepicker将日期格式修改为mm/dd/yyyy

实现步骤 #

• 调整Field组件配置：原生type="date"输入框的返回值固定为yyyy-MM-dd格式，且展示格式由浏览器默认规则决定，要强制使用mm/dd/yyyy格式，推荐搭配自定义日期选择器组件使用，通过Field的as属性指定渲染为对应的日期选择器，同时配置格式参数：

<Form class="row g-3" :validation-schema="schema" @submit="submit($event)" v-slot="{ errors }">
  <div class="col-md-6">
    <label for="inputdate" class="form-label">
      有效期<span class="required-field"></span>
    </label>
    <Field
      name="ExpiryDate"
      as="你所使用的日期选择器组件名"
      v-model="ExpiryDate"
      format="MM/dd/yyyy" <!-- 对应日期选择器的展示格式属性 -->
      value-format="MM/dd/yyyy" <!-- 配置绑定值直接返回mm/dd/yyyy格式 -->
      placeholder="请选择日期"
      class="form-control"
      id="inputdate"
      :class="{ 'is-invalid': errors.ExpiryDate }"
    />
    <div class="invalid-feedback">
      {{ errors.ExpiryDate }}
    </div>
  </div>
</Form>

• 配置校验规则：在validation-schema中添加mm/dd/yyyy格式校验逻辑，以常用的yup规则为例：

import * as yup from 'yup'

const schema = yup.object({
  // 其余表单字段的校验规则
  ExpiryDate: yup
    .string()
    .required('有效期为必填项')
    .matches(
      /^(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/,
      '日期格式必须为mm/dd/yyyy'
    )
    // 额外校验日期合法性，避免出现2/30这类无效日期
    .test('valid-date', '请输入有效的日期', (value) => {
      if (!value) return false
      const [month, day, year] = value.split('/').map(Number)
      const checkDate = new Date(year, month - 1, day)
      return checkDate.getFullYear() === year && checkDate.getMonth() === month - 1 && checkDate.getDate() === day
    })
})

• 若坚持使用原生日期输入框，可通过计算属性做格式转换，示例如下：

import { ref, computed } from 'vue'

// 存储原生输入框返回的ISO格式日期
const expiryDateISO = ref('')
// 对外暴露mm/dd/yyyy格式的日期
const ExpiryDate = computed({
  get() {
    if (!expiryDateISO.value) return ''
    const [year, month, day] = expiryDateISO.value.split('-')
    return `${month}/${day}/${year}`
  },
  set(val) {
    const [month, day, year] = val.split('/')
    expiryDateISO.value = `${year}-${month}-${day}`
  }
})

内容的提问来源于stack exchange，提问作者Nikhil Gorde