本文介绍将elementui的el-date-picker再次封装并设置选择范围在一个月内
封装的组件date-picker.vue
<template><el-date-pickerplaceholder="请选择统计日期"unlink-panels:value="value"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd HH:mm:ss":default-time="['00:00:00', '23:59:59']":picker-options="pickerOptions"@input="change($event)"/></template><script>export default {name: 'DatePicker', //时间选择器，只可以选择1个月以内的props: {value: {type: Array,default: []}},data() {return {selectDate: '',//日期选择范围在一个月内pickerOptions: {onPick: ({ maxDate, minDate }) => {this.selectDate = minDate.getTime()if (maxDate) {this.selectDate = ''}},disabledDate: (time) => {if (this.selectDate !== '') {const one = 30 * 24 * 3600 * 1000const minTime = this.selectDate - oneconst maxTime = this.selectDate + onereturn time.getTime() < minTime || time.getTime() > maxTime}}}}},methods: {change(val) {this.$emit('input', val)}}}</script>
调用组件
<template><DatePicker v-model="time_space" /></template><script>import DatePicker from '@/components/date-picker'export default {name: 'Statistics', //商户统计components: { DatePicker },data() {return {//给一个初始化的时间：当天的0点到现在time_space: [`${new Date().format('yyyy-MM-dd hh:mm:ss').split(' ')[0]} 00:00:00`, new Date().format('yyyy-MM-dd hh:mm:ss')]}}}</script>
本文用到了一个自己给date封装的方法,该方法可以将new Date()的时间转换为指定格式，具体如下:
utils.js（该js文件已经在main.js中全局引入）
// format函数为扩展函数。/***对Date的扩展，将 Date 转化为指定格式的String*月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，*年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)*例子：*(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> -07-02 08:09:04.423*(new Date()).Format("yyyy-M-d h:m:s.S")==> -7-2 8:9:4.18*/Date.prototype.format = function (fmt) {var o = {'M+': this.getMonth() + 1, //月份'd+': this.getDate(), //日'h+': this.getHours(), //小时'm+': this.getMinutes(), //分's+': this.getSeconds(), //秒'q+': Math.floor((this.getMonth() + 3) / 3), //季度S: this.getMilliseconds() //毫秒}if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))for (var k in o)if (new RegExp('(' + k + ')').test(fmt))fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))return fmt}
