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方法来实现的

Logo

前往低代码交流专区

更多推荐