需求:页面有两个时间选择器,其中一个需要展示完整的年月日时分秒,另一个展示年月日+小时,并且最小时间为当前时间。
css代码:
/*不显示分和秒*/ #layui-laydate2 .layui-laydate-content>.layui-laydate-list { padding-bottom: 0px; overflow: hidden; } #layui-laydate2 .layui-laydate-content>.layui-laydate-list>li{ width:100%; }
其中layui-laydate2时layui自动生成的,主要由lay-key="2"控制,如果页面只有一个时间选择器或者所有的时间选择器都相同,#layui-laydate省略可以不写。
如果只删除秒,保留时分只需要把width:100%;改成width:50%;就可以了。
页面:
<div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">完整时间</label> <div class="layui-input-inline"> <input type="text" name="all_time" autocomplete="off" class="layui-input" id="all_time" placeholder="请输入完整时间"> </div> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">删除分秒</label> <div class="layui-input-inline"> <input type="text" name="part_time" autocomplete="off" class="layui-input" id="part_time" placeholder="请输入时间"> </div> </div> </div>
js代码:
laydate.render({ elem: '#all_time' ,type: 'datetime' ,trigger:'click' }); laydate.render({ elem:'#part_time' ,type: 'datetime' ,min:(new Date(new Date().getTime() + 1 * 60 * 60 * 1000)).toLocaleString('chinese',{ hour12: false }) ,trigger:'click' ,btns:['clear','confirm'] ,done:function(value, date, endDate){ this.dateTime.minutes = 00; this.dateTime.seconds = 00; } })