antd-vue中a-range-picker限制日期最大选择区间

温柔雨哥a

已于 2023-05-09 10:45:48 修改

阅读量2k

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-05-09 10:44:22 首次发布

本文链接：https://blog.csdn.net/CSDN_bare/article/details/130575029

版权

该文章展示了一个Vue.js应用中如何使用a-range-picker组件来限制用户选择的日期范围不超过60天。通过`disabledDate`方法动态计算并禁用超过限制的日期，同时在`onChange`事件中更新和处理选中的日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务场景：当选择完一个开始日期,截止结束日期不得大于x天
在这里插入图片描述
下图示例为限制范围为60天内

代码贴在这里所用事件官方文档都有
在这里插入图片描述

<template>
   <a-range-picker style="width:100%;" :disabled-date="disabledDate" :placeholder="['开始时间', '结束时间']" :value="createValue" format="YYYY-MM-DD" @change="onChange" @calendarChange="calendarPriceRangeChange" />
</template>
<script>
    import moment from 'moment';
    export default {
        data() {
            return {
                createValue: [],
                selectPriceDate: '',
                offsetDays: 86400000 * 60 //最多选择60天
            }
        },
        methods:{
            moment,
		    //选择开始时间/结束时间
		    calendarPriceRangeChange(date) {
		      this.selectPriceDate = date[0]
		    },
		    //根据选择的开始时间/结束时间，动态渲染要禁用的日期
		    disabledDate(current) {
		      if (this.selectPriceDate) {
		        let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
		        return current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') ||
		          current < moment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD')
		      } else {
		        return false
		      }
		    },
		    onChange(dates, dateStrings) {
		      //选择完时间 清空限制
		      this.selectPriceDate = ''
		      this.createValue = dates;
		      this.queryParam.opSTime = dateStrings[0];
		      this.queryParam.opETime = dateStrings[1];
		      console.log("From: ", dates[0], ", to: ", dates[1]);
		      console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
		    },
        }
</script>