ant design vue日期选择器默认初始值加校验踩坑记录
项目需求:form表单提交日期选择器,开始日期默认初始值为当天,截止日期默认初始值为本月最后一天,且不可选择当日之前的时间,提交表单需要校验。// 正确代码<template><a-form :form="form"><a-form-itemlabel="开始时间":labelCol="labelCol":wrapperCol="wrapperCol" ><
·
项目需求:form表单提交日期选择器,开始日期默认初始值为当天,截止日期默认初始值为本月最后一天,且不可选择当日之前的时间,提交表单需要校验。
// 正确代码
// date-picker在表单中默认初始值要用initialValue赋值,不要使用defaultValue,否则表单提交获取不到默认值
<template>
<a-form :form="form" @submit="handleSubmit">
<a-form-item
label="开始时间"
:labelCol="labelCol"
:wrapperCol="wrapperCol" >
<a-date-picker
:disabled-date="disabledEndDate"
v-decorator="[ 'startTime',
{
initialValue: taskStartTime,
rules: [{ required: true, message: '请选择开始时间'}]
}
]"
>
</a-date-picker>
</a-form-item>
<a-form-item
label="截止时间"
:labelCol="labelCol"
:wrapperCol="wrapperCol" >
<a-date-picker
:disabled-date="disabledEndDate"
v-decorator="[
'endTime',
{
initialValue: monthDate, // 初始值通过initialValue赋值
rules: [{ required: true, message: '请选择截止时间'}],
}
]"
>
</a-date-picker>
</a-form-item>
<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
<a-button type="primary" @click="handleSubmit">
提交
</a-button>
</a-form-item>
</form>
</template>
import moment from 'moment'
export default {
data(){
return {
form: this.$form.createForm(this, { name: 'coordinated' }),
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
taskStartTime: moment(new Date()).format('YYYY-MM-DD'), //开始日期当天
monthDate: '', // 截止日期
},
created(){
this.getmonthDate()
},
methods:{
getmonthDate () {
// var monthDate = ''
var now = new Date() // 当前日期
var nowMonth = now.getMonth() // 当前月
var nowYear = now.getFullYear() // 当前年
// 本月的开始时间
// var monthStartDate = new Date(nowYear, nowMonth, 1)
// var yy = monthStartDate.getFullYear() + '-'
// var mm =
// (monthStartDate.getMonth() + 1 < 10
// ? '0' + (monthStartDate.getMonth() + 1)
// : monthStartDate.getMonth() + 1) + '-'
// var dd =
// monthStartDate.getDate() < 10
// ? '0' + monthStartDate.getDate()
// : monthStartDate.getDate()
// 本月的结束时间
var monthEndDate = new Date(nowYear, nowMonth + 1, 0)
var YY = monthEndDate.getFullYear() + '-'
var MM =
(monthEndDate.getMonth() + 1 < 10
? '0' + (monthEndDate.getMonth() + 1)
: monthEndDate.getMonth() + 1) + '-'
var DD =
monthEndDate.getDate() < 10
? '0' + monthEndDate.getDate()
: monthEndDate.getDate()
// monthDate.start_day = yy + mm + dd
this.monthDate = YY + MM + DD // 本月最后一天
// return monthDate
console.log(this.monthDate)
},
// 禁止选择当天之前的日期 不包含当天
disabledEndDate (current) {
return current && current < moment().subtract(1, 'days') // 当天之前的不可选,不包括当天
// return current && current < moment().endOf(‘day') 当天之前的不可选,包括当天
},
// 表单提交
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
},
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)