Boostrap Time Control

1: Introduce the corresponding CSS and JS

Css:

<link href= "<%=path%>/css/bootstrap.min.css" rel= "stylesheet" type= "Text/css"/>

<link href= "<%=path%>/css/bootstrap-datetimepicker.css" rel= "stylesheet" type= "Text/css" >

JS file:

<script src= "<%=path%>/js/jquery.min.js" type= "Text/javascript" ></script>

<script src= "<%=path%>/js/bootstrap.min.js" type= "Text/javascript" ></script>

<script src= "<%=path%>/js/bootstrap-datetimepicker.min.js" ></script>

<script src= "<%=path%>/js/bootstrap-datetimepicker.zh-cn.js" ></script>

2:html Code:

<div class= "Form-group" ><label class= "col-lg-2 Control-label" > Execution time: </label><div class= " Col-lg-4 "><input class=" Form-control "type=" text "data-date-format=" Yyyy-mm-dd hh:ii:ss "placeholder=" Execution Time (start ) "id=" Starttimedatepicker "name=" StartTime "/></div><div class=" col-lg-4 "><input class=" Form-control "type=" text "data-date-format=" Yyyy-mm-dd hh:ii:ss "placeholder=" Execution Time (end) "Name=" EndTime "/></div ></div>

3:js Code

var datepickers = $ ("Input[data-date-format]");d Atepickers.datetimepicker ({language: ' ZH-CN ', weekstart:1, autoclose:true,//The selection box is automatically closed after the selection time is set Startdate:new Date ()//});

Boostrap Time Control