arco design 日期选择器只能选择七天时间

最新推荐文章于 2024-07-19 14:40:55 发布

张可爱呀--

最新推荐文章于 2024-07-19 14:40:55 发布

阅读量562

点赞数 8

文章标签： arco design 前端 javascript

本文链接：https://blog.csdn.net/m0_60207396/article/details/135065411

版权

 <a-form-item label="创建时间" field="createTime">
          <a-range-picker v-model="dateRange"
                          :disabledDate="disabledDate"
                          @select="calendarPriceRangeChange"
                          value-format="YYYY-MM-DD HH:mm:ss" style="width: 254px" />
        </a-form-item>

let selectPriceDate = ref('');//可选时间区间，逻辑自行修改
const offsetDays = 86400000 * 7; //最多选择7天

/**
 * 查询的时候只能选择前七天或者后七天，禁用其他时间
 * @param current
 */
function disabledDate(current :any) {
  if (selectPriceDate.value) {
    let selectV = moment(selectPriceDate.value, 'YYYY-MM-DD').valueOf();
    return (
      current > moment(new Date(selectV + offsetDays), 'YYYY-MM-DD') ||
      current < moment(new Date(selectV - offsetDays), 'YYYY-MM-DD')
    );
  } else {
    return false;
  }
}

/**
 * 点击时间
 * @param date
 */
const calendarPriceRangeChange = (date:any) => {
  selectPriceDate.value = date[0];
};