elementUI DatePicker日期范围用moment对象

Posted 2021-09-13 sjg20010414

官方的例子中，对于快捷方式的onclick处理，起止日期都是Date对象，那么能不能用momont对象呢？是可以的，不过需要注意，即快捷方式用了moment对象，用快捷方式选择时，v-model绑定的变量得到的是moment数组，即[moment,moment]，但自定义选择日期时，返回的依然是[Date,Date]，解决办法是都化成moment对象，好在moment()方法比较“万能”，里面无论装入moment对象（克隆）还是Date对象（包装），返回的都是moment对象

<el-date-picker v-model="dateRange" type="daterange" align="right" unlink-panels size="small"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            :picker-options="dateRangeOptions" @change="handleDateRangeChange">
            </el-date-picker>

dateRangeOptions: {
                    shortcuts: [{
                        text: '近2周',
                        onClick(picker) {
                            const start = moment().day(1).subtract(7, 'days')
                            const end = moment()
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '近4周',
                        onClick(picker) {
                            const start = moment().day(1).subtract(21, 'days')
                            const end = moment()
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '近8周',
                        onClick(picker) {
                            const start = moment().day(1).subtract(49, 'days')
                            const end = moment()
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '本月',
                        onClick(picker) {
                            const end = moment();
                            const start = moment().startOf('month');
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '上月',
                        onClick(picker) {
                            const end = moment().subtract(1, 'month').endOf('month')
                            const start = moment().subtract(1, 'month').startOf('month')
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '近2月',
                        onClick(picker) {
                            const end = moment()
                            const start = moment().subtract(1, 'month').startOf('month')
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },

[_self.ds, _self.de] = _self.dateRange.map(o => moment(o).format('YYYY-MM-DD'))