Antdv的日期选择器结合moment.js的用法

1.moment.js的安装及使用

官网：

安装：npm install moment --save   # npm
      yarn add moment             # Yarn

引入： import moment from 'moment'

1.格式化日期
moment().format('MMMM Do YYYY, h:mm:ss a'); // 九月 8日 2023, 4:59:03 下午
moment().format('dddd');                    // 星期五
moment().format("MMM Do YY");               // 9月 8日 23
moment().format('YYYY [escaped] YYYY');     // 2023 escaped 2023
moment().format();                          // 2023-09-08T16:59:03+08:00
moment.format('YYYY-MM-DD');                //2023-09-08

 2.获取年月日或者设置指定日期
moment().year(Number);                      //获取或设置年份(接受-270,000 到 270,000 的数字）
moment().year(); // Number

moment().quarter(); // Number               //获取季度（1 到 4）
moment().quarter(Number);

moment().month(Number|String);
moment().month(); // Number                 //获取或设置月份(0-11对应1-12月),版本 2.1.0 开始，溢出已更改为固定到目标月末

moment().week(Number);
moment().week(); // Number                 //获取或设置一年中的第几周

moment().weekday(Number);
moment().weekday(); // Number              //根据区域设置获取或设置星期几,超出范围，就会冒泡到其他周

moment().day(Number|String);               //获取或设置星期几。(0-6，0对应星期天）
moment().day(); // Number       

moment().date(Number);                     
moment().date(); // Number                 //获取或设置月中的第几天(0-31),超出范围，它将冒泡到几个月

moment().hour(Number);
moment().hour(); // Number                 //获取或设置小时,(范围0-23),超出范围，它将冒泡到当天

moment().minute(Number);
moment().minute(); // Number               //获取或设置分钟。(范围0-59)超出范围，它将冒泡到小时

moment().second(Number);
moment().second(); // Number               //获取或设置秒数.(范围0-59),超出范围，它将冒泡到分钟

3.日期操作
加
moment().add(Number, String);              
moment().add(Duration);                    //number:取值，string:设置赋值类型。添加时间来改变原始 moment。 string常用:'years','months',,'days','hours','seconds',

减
moment().subtract(Number, String);
moment().subtract(Duration);              //减去时间来改变原始 moment,同加规则相似

设置起始值
moment().startOf(String);                 //将其设置为一个时间单位的开始来改变原始 momen,string：'year','month','quarter','week','isoWeek','day','date','hour','minute','second'
moment().endOf(String);                   //将原始 moment 设置为时间单位的末尾来改变原始 moment

最大值
moment().max(Moment|String|Number|Date|Array);
最小值
moment().min(Moment|String|Number|Date|Array);

2.实例结合antdv的日期范围选择器，实现范围选择

设置默认初始值为当前月第一天到当前天，并设置可选时间范围只能在同一月份

  <a-range-picker 
   v-model="dates"                                               
   :disabled-date="disabledEndDate"
   @calendarChange="calendarPriceRangeChange"
   @change="changePriceRangeDate"
   format="YYYY-MM-DD"/>

   disabledEndDate(current){
   if(this.selectPriceDate){ //若已选择开始时间
   const yearStart = moment(this.selectPriceDate).startOf('month') // 当前月份的第一天
   const yearEnd = moment(this.selectPriceDate).endOf('month') // 当前月份的最后一天
   return yearStart > current || current > yearEnd||current >moment().subtract(0, 'days').endOf('day') //返回选择月份范围内时间
                
   }

   return current >moment().subtract(0, 'days').endOf('day')||current<moment().subtract(9, 'months').endOf('months')//返回当前月范围时间
        },

到这里，通过moment和antdv的日期选择框，实现默认获取当前月第一天和当前日期，并限制选择时间范围在同一月的功能就实现了