Vue Antd RangePicker限制选择时间段为一个月

1 篇文章 0 订阅

需求:选择今天之前(包括今天),时间段范围一月内。

<a-range-picker :value="createValue" @change='aaa' 
   :disabled-date="disabledPriceRangeDate"
   @calendarChange="calendarPriceRangeChange"
   :format="dateFormat">
     <template slot="renderExtraFooter">
     </template>
 </a-range-picker>
import moment from 'moment';
data() {
    return {
		dateFormat: 'YYYY-MM-DD',
		createValue:[
	        moment(this.formatDate(new Date().getTime() - 31*86400000, 'Y-m-d')),
	        moment(this.formatDate(new Date().getTime(), 'Y-m-d'))
	      ],
      	selectPriceDate: '',
   	 	offsetDays: 2678400 * 1000 //最多选择范围31天m
	},
},
methods: {
	moment,
	calendarPriceRangeChange(date){
      this.selectPriceDate = date[0]
    },
    disabledPriceRangeDate(current){
      if(this.selectPriceDate){
        let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
        return current > moment(this.formatDate(new Date(selectV+this.offsetDays).getTime(), 'Y-m-d')) ||
                current < moment(this.formatDate(new Date(selectV-this.offsetDays).getTime(), 'Y-m-d')) || 
                current > moment().endOf('day')
      		}else{
        		return current > moment().endOf('day')
      		}
    	},
	},
	formatDate: (timestamp, formatLayout = 'Y-m-d H:i:s') => {
      let formatDate = ""
      formatLayout = formatLayout.toUpperCase()
      timestamp = (timestamp+"").length > 11 ? timestamp : timestamp * 1000
      let time = new Date(timestamp)
      for (let i in formatLayout) {
        if (['Y','M','D', 'W','H','I','S'].indexOf(formatLayout[i]) >= 0) {
          switch (formatLayout[i]) {
            case 'Y':
              formatDate += time.getFullYear()
              break;
            case 'M':
              formatDate += time.getMonth() >= 9 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1)
              break;
            case 'D':
              formatDate += time.getDate() > 9 ? time.getDate() : '0' + time.getDate()
              break;
            case 'W':
              formatDate += time.getDay() == 0 ? 7 : time.getDay()
              break;
            case 'H':
              formatDate += time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
              break;
            case 'I':
              formatDate += time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
              break;
            case 'S':
              formatDate += time.getSeconds() > 9 ? time.getSeconds() : '0' + time.getSeconds()
              break;
          }
        }else{
          formatDate += formatLayout[i]
        }
      }
 
      return formatDate
    },
}
  • 效果图

在这里插入图片描述
参考文章:https://blog.csdn.net/qq_39186346/article/details/107687502

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值