Ant组件踩坑记录(日期选择器)

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 />

 网上看了一圈,没有同类问题(PS:我太菜了),但我发现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()
}
posted @ 2023-11-03 14:29  KimRainbow  阅读(419)  评论(0)    收藏  举报