datetimepicker是一款时间选择控件，有时我们会用两个控件选择开始时间和结束时间，要求开始时间不能晚于结束时间，html实现代码如下：
<html> <head> <meta charset="UTF-8"> <title>dateTimePicker</title> <link type="text/css" rel="stylesheet" href="css/skin.css"></link> <link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css"> <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script> <script type="text/javascript" src="js/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script> <script type="text/javascript" src="js/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script> </head> <body> <div style="width:300px" class="input-group"><!-- 开始时间 --> <span class="input-group-addon prev">开始时间</span> <input type="text" class="form-control content cursor-pointer" id="startTime" readonly s> </div> <div style="width:300px" class="input-group"><!-- 结束时间 --> <span class="input-group-addon prev">结束时间</span> <input type="text" class="form-control content cursor-pointer" id="endTime" readonly > </div> </body> <script type="text/javascript"> $("#startTime").datetimepicker({ format: 'yyyy-mm-dd hh:ii:ss', minuteStep:1, minView:'hour', language: 'zh-CN', pickerPosition:'bottom-right', autoclose:true, }).on("click",function(){ $("#startTime").datetimepicker("setEndDate",$("#endTime").val()); }); $("#endTime").datetimepicker({ format: 'yyyy-mm-dd hh:ii:ss', minuteStep:1, minView:'hour', language: 'zh-CN', autoclose:true, }).on("click",function(){ $("#endTime").datetimepicker("setStartDate",$("#startTime").val()); }); $(document).on("click","#endTime",function(){ $('#endTime').datetimepicker('show'); }); $(document).on("click","#startTime",function(){ $('#startTime').datetimepicker('show'); }); </script> </html>
4397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
