背景:
时间字段展示默认值,开始时间为当天 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="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="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="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="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>