Vue + Ts + element +moment.js日期范围选择

一、安装moment.js

npm i moment -D

二、引入

import moment from 'moment'

三、用法

<template>
<el-form>
	<el-form-item label="授权有效期" prop="" >
	   <el-date-picker
	      v-model="date"
	      :picker-options="pickDateOptions"
	      :default-time="['12:00:00']"
	      end-placeholder="结束日期"
	      format="yyyy-MM-dd HH:mm:ss"
	      start-placeholder="开始日期"
	      type="datetimerange"
	      value-format="yyyy-MM-dd HH:mm:ss"
	    />
	</el-form-item>
</el-form>
</template>
<script lang="ts">
import {Vue,Component, Watch} from "vue-property-decorator";
import moment from 'moment';

@Component
export default class extends Vue{
    private title = "";
    private date = []; //用于日期选择绑定v-model;
    private formData = {
        start_time: "",
        end_time: "2021-4-18 12:10:10"
    };

    // disabledDate element自带日期potion 参数time:当前组件显示所有日期。
    // disabledDate()会遍历所有time，判断是否符合条件，返回true or false是否显示禁用
    private get pickDateOptions() {
        let self = this;
        return {
            disabledDate(time) {
            	//用moment获取当前日期时间
                const dateNow = moment().locale('zh-cn').subtract('1','day').format('YYYY-MM-DD')
                return !(moment(time.getTime()).isBetween(dateNow, self.formData.end_time));
            }
        }
    }

    @Watch("date", {immediate: false})
    private onDateChanged(value: Array<string>) {
        if (!_.isEmpty(value)) {
            this.formData.start_time = value[0];
            this.formData.end_time = value[1];
        } else {
            this.formData.start_time = "";
            this.formData.end_time = "";
        }
    }

            }
        });
    }
}
</script>

四、效果展示