iView的DatePicker怎么设置默认显示今天日期?

Des.艺晗 阅读 13

我在用iView的DatePicker组件,想让它初始化的时候默认选中今天日期,但试了valuedefaultValue都不生效,控制台也没报错,就是空白。官方文档看得有点懵,有没有人遇到过类似问题?

我现在的写法大概是这样的:

<Date-picker type="date" v-model="selectedDate" placeholder="选择日期"></Date-picker>

然后在data里设了selectedDate: new Date(),但页面上还是没默认值,是我哪里弄错了吗?

我来解答 赞 9 收藏
二维码
手机扫码查看
1 条解答
Tr° 子轩
你这个问题应该是因为日期格式的问题。iView的DatePicker组件对日期格式有些要求,直接用new Date()可能不符合它的预期格式。

你可以尝试将日期格式化为字符串,比如 'YYYY-MM-DD' 的形式。可以使用JavaScript的日期库moment.js来处理日期格式,这样会方便很多。

首先确保你已经安装了moment.js,如果没有安装,可以通过npm安装:
npm install moment --save

然后在你的组件中引入并使用moment.js来格式化日期:

import moment from 'moment';

export default {
data() {
return {
selectedDate: moment().format('YYYY-MM-DD')
};
}
}


这样设置后,selectedDate 就会被初始化为今天的日期,并且格式是DatePicker组件能够识别的。

记得在模板中保持原有的v-model绑定方式不变:

<Date-picker type="date" v-model="selectedDate" placeholder="选择日期"></Date-picker>


希望这样能解决你的问题,如果还有其他问题再问我。
点赞
2026-03-23 19:00