input 時間字段默認值

背景：

時間字段展示默認值，開始時間為當天 0點，結束時間為當天晚上12點

 

代碼：

<input style="Width: 180px;float:left ;" type="date" id="start_time"
 name="start_time" placeholder="請選擇具體時間"   data-format="YYYY-MM-DD HH:mm"/>
<input style="Width: 180px;float:left ;" type="date" id="end_time"
 name="end_time" placeholder="請選擇具體時間"  data-format="YYYY-MM-DD HH:mm"/>

<script type="text/javascript">
    //時間默認值，默認當前時間
    var dataCur = new Date();
    var dataYMD = dataCur.getFullYear() + '-' + (dataCur.getMonth() + 1) + '-' + (dataCur.getDate())
    var dataStart = dataYMD+' 00:00'
    var dataEnd = dataYMD+' 23:59'
    $('#start_time').val(dataStart);
    $('#end_time').val(dataEnd);
    </script>

 

vue中寫法

<template>
    <div>
        <el-row style="height:30px" type="flex">
            <el-col :span="12">
                <el-form-item label="開始時間" required>
                    <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable
                                    placeholder="選擇日期" v-model="form.loadDate"
                                    style="width:140px;"></el-date-picker>
                    <el-time-picker type="fixed-time" format="HH:mm:ss" value-format="HH:mm:ss" clearable
                                    placeholder="選擇時間" v-model="form.loadTime" style="width:120px;"
                    ></el-time-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="結束時間" required>
                    <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable
                                    placeholder="選擇日期" v-model="form.unloadDate"
                                    style="width:140px;"></el-date-picker>
                    <el-time-picker type="fixed-time" format="HH:mm:ss" value-format="HH:mm:ss" clearable
                                    placeholder="選擇時間" v-model="form.unloadTime"
                                    style="width:120px;"></el-time-picker>
                </el-form-item>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    //時間默認值，默認當前時間+1天
    var dataCur = new Date();
    var dataDef = dataCur.getFullYear() + '-' + (dataCur.getMonth() + 1) + '-' + (dataCur.getDate() + 1)

    export default {
        data() {
            return {
                form: {
                    loadDate: dataDef,
                    loadTime: '8:00:00',
                    unloadDate: dataDef,
                    unloadTime: '20:00:00',
                }
            };
        },


        methods: {},

    };
</script>