526互联

Ant组件踩坑记录（日期选择器）

发布时间 2023-11-03 14:33:20作者: KimRainbow

1.日期选择器<a-date-picker/> 数值转化问题

原先写法，我是直接绑定“2023-11-03 00:00:00”的string值，结果发现日期框并无法显示这个日期

<a-date-picker v-model:value="timeInfo.invoiceDate"  format="YYYY-MM-DD HH:mm:ss" show-time />

 网上看了一圈，发现a-date-picker需要得到的不是string类型的日期值，且需要借助Dayjs进行转换后的日期值

 于是，我想了一个绕点单可实现的法子，在初始化时先进行一次转换，在日期选择后将string绑定回去，方法如下：

 

插件安装

npm install dayjs

插件引用

 import dayjs, { Dayjs } from 'dayjs'; 

组件变动如下 

<a-date-picker v-model:value="invoiceInfo.invoiceDate" @change="invoiceDateChange" format="YYYY-MM-DD HH:mm:ss" show-time />

 日期框转换方法如下

const timeInfo = reactive({
      invoiceDate: dayjs(invoiceInfo.formDate.InvoiceDate, 'yyyy-MM-dd HH:mm:ss')
})

const invoiceDateChange = (value: Dayjs) => {
      invoiceInfo.formData.InvoiceDate = value.toString()
}