Thymeleaf使用bootstrap及其bootstrap相關插件(二)
阿新 • • 發佈:2017-11-30
cti www. -h soft color bootstra images -s gda
接上文http://www.cnblogs.com/conswin/p/7929772.html
接下來bootstrap-datepicker的簡單使用。
1、引入添加js 和 css
2、然後是html頁面代碼,很簡單,一個標簽即可:
<div class="rowGroup" > <label class="col-sm-1 control-label" >開始日期</label> <div class="col-sm-2 "> <div class="input-group" > <input type="text" class="form-control form_datetime" id="hd_begdate" name="hd_begdate"/> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span> </div> </div> </div> <div class="rowGroup" > <label class="col-sm-1 control-label" >結束日期</label> <div class="col-sm-2 "> <div class="input-group" > <input type="text" class="form-control form_datetime" id="hd_enddate" name="hd_enddate"/> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span> </div> </div> </div>
3、在JS文件中初始化,此時還可以設定開始日期不能大於結束日期
$(document).ready(function() {
//設定日期選擇格式
$(‘.form_datetime‘).datetimepicker({
minView: "month", //選擇日期後,不會再跳轉去選擇時分秒
language: ‘zh-CN‘,
format: ‘yyyy-mm-dd‘,
todayBtn: 1,
autoclose: 1
}) .on("click",function(){
//設定日期選擇開始日期需要小於結束日期
$("#hd_begdate").datetimepicker("setEndDate",$("#hd_enddate").val());
$("#hd_enddate").datetimepicker("setStartDate",$("#hd_begdate").val());
});
效果圖:
Thymeleaf使用bootstrap及其bootstrap相關插件(二)