ant-design-vue时间控件初始值赋值及日期可选范围设置实现
ant-design-vue框架中时间控件dataPicker默认初始值为当天,有两种书写方式1、created钩子中初始值赋值,注意:只有在created钩子中赋初始值才能实现,created () {this.form.getFieldDecorator('discloseDate', { initialValue: moment(new Date()) })},2、直接在DOM中赋初始值:&
·
ant-design-vue框架中时间控件dataPicker默认初始值为当天,有两种书写方式
1、created钩子中初始值赋值,注意:只有在created钩子中赋初始值才能实现,
created () {
this.form.getFieldDecorator('discloseDate', { initialValue: moment(new Date()) })
},
2、直接在DOM中赋初始值:
<a-form-item label="披露日期">
<a-date-picker
v-decorator="['discloseDate', { initialValue: moment(new Date()), rules: [{ required: true, message: '请选择披露日期!' }] }]"
style="width: 100%"
format="YYYY-MM-DD"
:disabled-date="disabledDate"
/>
</a-form-item>
注意:此时需要在methods中引入moment,否则会报错
methods: {
moment,
disabledDate (current) {
const currentMonth = moment().get('month') - 1
const currentYear = moment().get('month') === 0 ? moment().get('year') - 1 : moment().get('year')
const monthStart = moment().set({ 'year': currentYear, 'month': currentMonth, 'date': 0 })
return current < monthStart || current > moment().endOf('day')
},
}
涉及另外一个知识点,是时间控件只有当天和上个月一号之间的时间是可选的
主要用的是disabledDate方法来实现的
更多推荐
已为社区贡献1条内容
所有评论(0)