download
js/CSS download address: https://pan.baidu.com/s/1QC6CojJ6pVNdpZztbfN8cQ
Depends on jquery, bootStrap.
The version used here is JQuery 1.10.2 BootStrap 3.0.3. If you are the other version try it yourself.
use
Control DIV label:
<div class='col-sm-2'>
<div class="form-group">
<%--<label>选择日期+时间：</label>--%>
<!--指定 date标记-->
<div class='input-group date datetimePicker' id='datetimepicker2'>
<span class="input-group-addon">截止时间</span>
<input name="endTimeStr" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>javascript：
/**
* @Description: 时间控件初始化
* @Author: 张颖辉(yh)
* @Date: 2018/5/8 16:25
* @param:
* @return:
* @Version: 1.0
*/
$(function () {
$('.datetimePicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
locale: moment.locale('zh-cn')
});
});illustrate
Notice:
The format above is 'yyyy-mm-dd hh:ii:00'
The month is not MM but mm (if MM is used, the month in English will appear)
Minutes are not mm, but ii.
The last two 0s indicate the obtained time to minutes, and seconds are 00.
If you want to be accurate to the second, use 'yyyy-mm-dd hh:ii:ss'
Effect
Continue to select the hour after clicking on the date:
Continue to select minutes after clicking on hours:
After selecting minutes:
In the above figure, you can already see that the input box is filled with time accurate to minutes. Because of the length of the input box, it is not displayed in full (one less 0 is displayed in the second place).
Finally click on any other empty space and the time panel will disappear.