element日期切换，datetime和date 切换

今天，想记录一下element中日期时间组建遇到的一种切换的问题，当时改了好几版，最终敲定这种方案。当全天为false时，开始时间和结束时间可以选择日期和时间，当全天为true时，开始时间和结束时间至可以选择日期，不能选择时间。icon同时也可以切换。并且有选择范围。开始时间是当前时间，结束时间比开始时间多一个是小时，这个用@focus方法实现。判断当前时间，然后拆分后，加一个小时。

<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="85px" class="scheduleRuleForm">
            <el-form-item label="全天:" prop="newIsDay">
            <el-switch v-model="newIsDay"  @change="isDaySwitch()"></el-switch>
            </el-form-item>
            <el-form-item label="开始时间:" :required="true">
            <el-col :span="11">
                <el-form-item prop="beginTime">
                <el-date-picker 
                    time-arrow-control 
                    :type="dateTimeShow?'datetime':'date'" 
                    :format="dateTimeShow?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'" 
                    :value-format="dateTimeShow?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'" 
                    :default-time="nowTime" 
                    placeholder="选择日期时间" 
                    v-model="ruleForm.beginTime" 
                    :picker-options="expireTimeOption" 
                    style="width: 100%;"
                ></el-date-picker>
                </el-form-item>
            </el-col>
            </el-form-item>
            <el-form-item label="结束时间:" :required="true">
            <el-col :span="11">
                <el-form-item prop="endTime">
                <el-date-picker 
                    time-arrow-control 
                    :type="dateTimeShow?'datetime':'date'" 
                    :format="dateTimeShow?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'" 
                    :value-format="dateTimeShow?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'" 
                    @focus = "nowNextTimeChange"
                    :default-time="nowNextTime" 
                    placeholder="选择日期时间" 
                    v-model="ruleForm.endTime" 
                    :picker-options="expireTimeOption" 
                    style="width: 100%;"
                ></el-date-picker>
                </el-form-item>
            </el-col>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        data () {
            var validatebeginTime=(rule, value, callback) =>{
                if(value == null){
                    callback(new Error('请选择日期'));
                    return;
                }
                if(this.ruleForm.endTime != ''){
                    if(
                        new Date(this.ruleForm.endTime).getTime()
                        <
                        new Date(this.ruleForm.beginTime).getTime()
                    ){
                        callback(new Error('开始日期不能大于结束日期'));
                        return;
                    }
                }
                
                callback();
            }
            var validateendTime=(rule, value, callback) =>{
                if(value == null){
                    callback(new Error('请选择日期'));
                    return;
                }
                if(
                    new Date(this.ruleForm.endTime).getTime()
                    <
                    new Date(this.ruleForm.beginTime).getTime()
                ){
                    callback(new Error('结束日期不能小于开始日期'));
                    return;
                }
                callback();
            }
            return{
                nowHours:new Date().getHours(),
                nowMinutes:new Date().getMinutes(),
                nowSeconds:new Date().getSeconds(),
                newIsDay:false,
                dateTimeShow:true,
                nowTime:"",
                nowNextTime:"",
                ruleForm:{
                    beginTime:"",
                    endTime:"",
                },
                rules: {
                    beginTime: [
                        { required: true, validator: validatebeginTime, trigger: 'change' }
                    ],
                    endTime: [
                        { required: true, validator: validateendTime, trigger: 'change' }
                    ]
                },
                expireTimeOption: {
					disabledDate(date) {
						return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
					}
				}
            }
        },
        created(){
            this.Time();
        },
        methods: {
            Time(){
                this.nowTime =  (this.nowHours < 10 ? String("0" + this.nowHours) : this.nowHours)+':'+
                                (this.nowMinutes < 10 ? String("0" + this.nowMinutes) : this.nowMinutes)+':'+
                                (this.nowSeconds < 10 ? String("0" + this.nowSeconds) : this.nowSeconds)
            },
            nowNextTimeChange(){
                if(this.newIsDay == false){
                    if(this.ruleForm.beginTime != ""){
                        var regex=/\b(0+)/gi
                        var choiceTimeHours =  this.ruleForm.beginTime.slice(10,13)
                        var newChoiceTimeHours = (choiceTimeHours+'').replace(regex,"")
                        var nowTimeHours =  parseInt(newChoiceTimeHours)+1
                        var nowTimeMinutes =  this.ruleForm.beginTime.slice(14,16)
                        var nowTimeSeconds =  this.ruleForm.beginTime.slice(18,20)
                        this.nowNextTime =nowTimeHours+':'+nowTimeMinutes+':'+nowTimeSeconds
                    }else{
                        console.log(this.nowTime)
                        var regex=/\b(0+)/gi
                        var newChoiceTimeHours = this.nowTime.replace(regex,"")
                        var nowTimeHours =  parseInt(newChoiceTimeHours)+1
                        var nowTimeMinutes =  this.nowTime.slice(3,5)
                        var nowTimeSeconds =  this.nowTime.slice(6,8)
                        this.nowNextTime =nowTimeHours+':'+nowTimeMinutes+':'+nowTimeSeconds
                    }
                }
            },
            isDaySwitch(){
                this.$nextTick(()=>{
                    if(this.newIsDay == true){
                        this.dateTimeShow = false;
                        this.ruleForm.beginTime = ""
                        this.ruleForm.endTime = ""
                    }else if(this.newIsDay == false){
                        this.dateTimeShow = true;
                        this.ruleForm.beginTime = ""
                        this.ruleForm.endTime = ""
                    }
                })
            }
        }
    }
</script>