背景:
时间字段展示默认值,开始时间为当天 0点,结束时间为当天晚上12点
代码:
1 <input style="Width: 180px;float:left ;" type="date" id="start_time"
2 name="start_time" placeholder="请选择具体时间" data-format="YYYY-MM-DD HH:mm"/>
3 <input style="Width: 180px;float:left ;" type="date" id="end_time"
4 name="end_time" placeholder="请选择具体时间" data-format="YYYY-MM-DD HH:mm"/>
5
6 <script type="text/javascript">
7 //时间默认值,默认当前时间
8 var dataCur = new Date();
9 var dataYMD = dataCur.getFullYear() + '-' + (dataCur.getMonth() + 1) + '-' + (dataCur.getDate())
10 var dataStart = dataYMD+' 00:00'
11 var dataEnd = dataYMD+' 23:59'
12 $('#start_time').val(dataStart);
13 $('#end_time').val(dataEnd);
14 </script>
vue中写法
1 <template>
2 <div>
3 <el-row style="height:30px" type="flex">
4 <el-col :span="12">
5 <el-form-item label="开始时间" required>
6 <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable
7 placeholder="选择日期" v-model="form.loadDate"
8 style="width:140px;"></el-date-picker>
9 <el-time-picker type="fixed-time" format="HH:mm:ss" value-format="HH:mm:ss" clearable
10 placeholder="选择时间" v-model="form.loadTime" style="width:120px;"
11 ></el-time-picker>
12 </el-form-item>
13 </el-col>
14 <el-col :span="12">
15 <el-form-item label="结束时间" required>
16 <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable
17 placeholder="选择日期" v-model="form.unloadDate"
18 style="width:140px;"></el-date-picker>
19 <el-time-picker type="fixed-time" format="HH:mm:ss" value-format="HH:mm:ss" clearable
20 placeholder="选择时间" v-model="form.unloadTime"
21 style="width:120px;"></el-time-picker>
22 </el-form-item>
23 </el-col>
24 </el-row>
25 </div>
26 </template>
27 <script>
28 //时间默认值,默认当前时间+1天
29 var dataCur = new Date();
30 var dataDef = dataCur.getFullYear() + '-' + (dataCur.getMonth() + 1) + '-' + (dataCur.getDate() + 1)
31
32 export default {
33 data() {
34 return {
35 form: {
36 loadDate: dataDef,
37 loadTime: '8:00:00',
38 unloadDate: dataDef,
39 unloadTime: '20:00:00',
40 }
41 };
42 },
43
44
45 methods: {},
46
47 };
48 </script>