ant design vue3 日期选择器的用法

 <a-form-item

      label="缴费周期"

      name="range-picker"

      :rules="[{ required: true, message: '请选择日期' }]"

 >

      <a-range-picker

     :locale="locale"

     :disabledDate="disabledDate"

     v-model:value="formState['range-picker']"

     value-format="YYYY-MM-DD"  

     @change="TimeChange"/>

    </a-form-item>

js代码

import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';

import dayjs from 'dayjs'

const formState = reactive<any>({

  startTime:'',

  endTime:'',

  'range-picker':[],

})

// disabledDate  需要禁用的日期

const disabledDate = (current: any) => {

    return current && current <= dayjs().endOf('day')

}

// 时间的改变

const TimeChange = (e:any) => {

  console.log(e, '获取选择的时间');

  formState.startTime = e[0]

  formState.endTime = e[1]

  formState['range-picker'] = [formState.startTime, formState.endTime]

}