element-UI日期時間選擇器el-date-picker

<template>
    <div>
        <el-form :model="form" label-width="150px" ref="form" :rules="rules" class="form">
            <el-form-item label="舉辦時間" prop="holdTime">
                <el-date-picker size="small" v-model="holdTime"
                                :editable="false"
                                type="daterange"
                                :picker-options="expireTimeOption"
                                placeholder="選擇日期" value-format=" yyyy-MM-dd" format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    require('common/utils/date')
    export default {
        data() {
            return {
                form: {
                    holdStartTime: '',
                    holdEndTime: '',
                },
                holdTime: '',
                expireTimeOption: {
                    disabledDate(time) {
                        let nowData = new Date()
                        nowData = new Date(nowData.setDate(nowData.getDate() - 1))
                        return time < nowData
                    }
                },
                rules: {
                    holdTime: [
                        {
                            type: 'array',
                            required: true,
                            fields: {
                                0: {required: true, type: 'date', message: '舉辦開始時間不能爲空', trigger: 'change'},
                                1: {required: true, type: 'date', message: '舉辦結束時間不能爲空', trigger: 'change'}
                            },
                            trigger: 'change'
                        }
                    ],

                }
            }
        },
        methods: {
            // 獲取開始時間和結束時間的方法
            submitForm() {
                if (this.holdTime != null && this.holdTime != '') {
                    this.form.holdStartTime = this.holdTime[0].format('yyyy-MM-dd');
                    this.form.holdEndTime = this.holdTime[1].format('yyyy-MM-dd');
                }
            },
        },
    }
</script>
<style lang="less">
</style>

date.js工具類

Date.prototype.format = function (_) {
    var o = {
        "M+" : this.getMonth() + 1, //月份
        "d+" : this.getDate(), //日
        "h+" : this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小時
        "H+" : this.getHours(), //小時
        "m+" : this.getMinutes(), //分
        "s+" : this.getSeconds(), //秒
        "q+" : Math.floor((this.getMonth() + 3) / 3), //季度
        "S"  : this.getMilliseconds() //毫秒
    };
    var week = {
        "0" : "\u65e5",
        "1" : "\u4e00",
        "2" : "\u4e8c",
        "3" : "\u4e09",
        "4" : "\u56db",
        "5" : "\u4e94",
        "6" : "\u516d"
    };
    if ( /(y+)/.test(_) ) {
        _ = _.replace(RegExp.$1,(this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    if ( /(W+)/.test(_) ) {
        _ = _.replace(RegExp.$1,((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f" : "\u5468") : "") + week[this.getDay() + ""]);
    }
    for ( var k in o ) {
        if ( new RegExp("(" + k + ")").test(_) ) {
            _ = _.replace(RegExp.$1,(RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return _;
}
Date.prototype.addDays = function (a) {
    var r = new Date();
    return r.setTime(this.getTime() + ((a << 10) * 84375)), r;
}
Date.prototype.milliSeconds = function(){
    return Date.UTC(this.getFullYear(),this.getMonth(),this.getDate(),this.getHours(),this.getMinutes(),this.getSeconds(),this.getMilliseconds()) + this.getTimezoneOffset()* 60000;
}
Date.prototype.addYears = function(_){
    var _y = new Date(this.getTime());
    return _y.setFullYear( this.getFullYear() + _ ) , _y;
}