bootstrap日期控件

来源:互联网 发布:java视频教程毕向东 编辑:程序博客网 时间:2024/06/05 03:19

HTML页面代码

<tr><td class="form-frontword" style="text-align:center;vertical-align:middle;"><span class="form_name_text">日期:</span></td><td><div class="col-md-7">       <div class='input-group date form_date' >  <input name="startTm" id="datetimepicker" type='text' class="input-sm span10 form-control date-picker" style="width: 100%;" readonly="readonly"/>  <span class="input-group-addon input-sm">    <span class="glyphicon glyphicon-calendar"></span>  </span>      </div>   </div>  </td></tr>

引入js

<!-- bootstrap-datepicker --><link href="<%=basePath%>resources/bootstrap/date-time/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css"/><script src="<%=basePath%>resources/bootstrap/date-time/js/bootstrap-datetimepicker.js" type="text/javascript"></script><script src="<%=basePath%>resources/bootstrap/date-time/js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>


1、选择年月日

$('#datetimepicker').datetimepicker({  format: 'yyyymmdd',  weekStart: 1,  autoclose: true,  startView: 2,  minView: 2,  forceParse: false,  language: 'zh-CN'  });

2、选择年月

$('#datetimepicker').datetimepicker({  format: 'yyyymm',  weekStart: 1,  autoclose: true,  startView: 3,  minView: 3,  forceParse: false,  language: 'zh-CN'  }); 

3、选择年

$('#datetimepicker').datetimepicker({  format: 'yyyymm',  weekStart: 1,  autoclose: true,  startView: 4,  minView: 4,  forceParse: false,  language: 'zh-CN'  }); 

效果图: