1.moment.js的安装及使用
官网:
安装:npm install moment --save # npmyarn add moment # Yarn
引入:import moment from 'moment'
1.格式化日期moment().format('MMMM Do YYYY, h:mm:ss a'); // 九月 8日 , 4:59:03 下午moment().format('dddd');// 星期五moment().format("MMM Do YY");// 9月 8日 23moment().format('YYYY [escaped] YYYY');// escaped moment().format();// -09-08T16:59:03+08:00moment.format('YYYY-MM-DD');//-09-082.获取年月日或者设置指定日期moment().year(Number); //获取或设置年份(接受-270,000 到 270,000 的数字)moment().year(); // Numbermoment().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的日期选择框,实现默认获取当前月第一天和当前日期,并限制选择时间范围在同一月的功能就实现了