ant design vue自定义时间段范围(range-picker),moment相关API

html(jsx格式)

 <a-range-picker
    disabled-date={this.disabledDate}
    v-model={[this.searchTime, 'value']}
    format="YYYY-MM-DD"
    valueFormat="YYYY-MM-DD"
    onCalendarChange={this.calendarPriceRangeChange}
    onOpenChange={this.onOpenChange}
/>

js:

let searchTime = ref([]);
let disabledCurrent= ref(null); // 选择的第一个时间   用来进行计算前后要禁用天数

const onOpenChange = () => {
   // 清空禁用时间段的设置
   disabledCurrent.value = null;
};

const calendarPriceRangeChange = (dates) => {
   disabledCurrent.value = dates[0];
};

const disabledDate = (current) => {
	   //  当前时间  current  =  北京时间
	  // 如果没有选择第一个时间 那么 默认不能选择当前以后的日期
      if (!disabledCurrent.value) return current > moment();
      // 下面是 禁止选择 当前时间以后的日期 current > moment() 
      // 并且 只能选择31天范围内日期  
      //  moment(disabledCurrent.value) 获取你选择的第一个日期
      //  .subtract(30, 'd')  获取该日期的31天前的时间  .startOf('day') 从00:00:00 开始算
      //  不理解代码意思的参考下面moment.js的相关知识进行逻辑梳理,不多解释
      return (
        current < moment(disabledCurrent.value).subtract(30, 'd').startOf('day') ||
        current > moment(disabledCurrent.value).add(30, 'd').endOf('day') ||
        current > moment()
      );
     
 };

一些其他案例

// 不能选择今天之前的日期(包括今天)
disabledDate(current) {
     return current && current < moment().endOf('day');
}

// 不能选择今天之前的日期(不包括今天)
disabledDate(current) {
   return current && current < moment().subtract(1, 'days').endOf('day')
}
// 想知道更多 点个关注  艾特我吧

普及一下 moment.js 的相关知识

获取当前的日期和时间  moment()

获取String的日期和时间  moment(String)

获取当天的年份  moment().get('year')

获取当天的月份 0-12   moment().get('month')+1

获取当天的日期   moment().get('date')
 
得到的时间格式为YYYY-MM-DD   moment(String,'YYYY-MM-DD')moment(String).format('YYYY-MM-DD')

设置年份,获取一年前的时间   moment().subtract(1, 'years')

设置月份,获取一个月前的时间   moment().subtract(1, 'months')

设置日期,获取昨天的时间    moment().subtract(1, 'days')  // 昨天   moment().subtract(30, 'days') // 31天

获取今天的000moment().startOf('day')

获取本周第一天的000moment().startOf('week')
 
获取今天的235959moment().endOf('day')

获取本周第一天的235959moment().endOf('week')

获取2月的天数    moment("2023-02", "YYYY-MM").daysInMonth() // 28

获取时间戳(以秒为单位)   moment().format('X').unix() // 返回值为数值型

获取时间戳(以毫秒为单位)    moment().format('x').valueOf() // 返回值为数值型

你可能感兴趣的:(vue3,+,jsx,+antd,vue.js,javascript,前端)