一.官网给出的例子
<template>
<div>
<a-date-picker :default-value="moment('2015/01/01', dateFormat)" :format="dateFormat"/>
<br />
<a-date-picker :default-value="moment('01/01/2015', dateFormatList[0])" :format="dateFormatList"/>
<br />
<a-month-picker :default-value="moment('2015/01', monthFormat)" :format="monthFormat"/>
<br />
<a-range-picker :default-value="[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]":format="dateFormat"/>
</div>
</template>
<script>
import moment from 'moment';
export default {
data() {
return {
dateFormat: 'YYYY/MM/DD',
monthFormat: 'YYYY/MM',
dateFormatList: ['DD/MM/YYYY', 'DD/MM/YY'],
};
},
methods: {
moment,
},
};
</script>
二.动态设置date-picker默认值
<template>
<div>
<a-date-picker :default-value="date ? moment(date , 'YYYY/MM/DD'):null"
@change="(date, dateString)=>changeDate(date, dateString)" />
<br />
<a-date-picker :default-value="getDateTime(date)" :format="dateFormat"/>
</div>
</template>
<script>
import moment from 'moment';
export default {
data() {
return {
dateFormat: 'YYYY/MM/DD',
data: ''
};
},
methods: {
moment,
getDateTime(time) {
return time ? this.moment(time, 'YYYY-MM-DD') : null
},
getDate(){
this.$http.get('/api').then(res => {
this.date = res.date
}),
changeDate(date, dateString){
this.date =dateString
}
}
},
};
</script>
1.:default-value="date ? moment(date , 'YYYY/MM/DD'):null"
,记得用三元表达式判断下,不然当 date
无值时 弹出的时间控件就不正常显示了。
2. :default-value="getDateTime(date)"
定义函数,这样可以写一些复杂的逻辑,具体使用看自己的需求。
设置range-picker默认值
<a-range-picker :default-value="getDateRange(date1, date2)" :format="dateFormat" />
getDateRange(startDate, endDate) {
return startDate && endDate ? [this.moment(startDate, 'YYYY/MM/DD'), this.moment(endDate, 'YYYY/MM/DD')] : null
},
使用:default-value
绑定时可能会发现获取了新的date
后控件上的日期并没有改变, 这时不妨用:value
绑定试试。
<a-date-picker :value="getDateTime(date)" :format="dateFormat"/>
<a-range-picker :value="getDateRange(date1, date2)" :format="dateFormat" />
新手学习 antd ,有不对之处还请大家指正,谢谢。