bootstrap datetimepicker 选择月份 选择年

直接上代码:

  1. //选择年月日的       startView: 2,   minView: 2, format: 'yyyymmdd',
  2. $('#datetimepicker').datetimepicker({
  3.         format: 'yyyymmdd',
  4.          weekStart: 1,
  5.          autoclose: true,
  6.          startView: 2,
  7.          minView: 2,
  8.          forceParse: false,
  9.          language: 'zh-CN'
  10.     });
  1. //选择年月的    startView: 3,   minView: 3, format: 'yyyymm',
  2. $('#datetimepicker').datetimepicker({
  3.         format: 'yyyymm',
  4.          weekStart: 1,
  5.          autoclose: true,
  6.          startView: 3,
  7.          minView: 3,
  8.          forceParse: false,
  9.          language: 'zh-CN'
  10.     });
  1. //选择年的     startView: 4,   minView: 4, format: 'yyyy',
  2. $('#datetimepicker').datetimepicker({
  3.         format: 'yyyymm',
  4.          weekStart: 1,
  5.          autoclose: true,
  6.          startView: 4,
  7.          minView: 4,
  8.          forceParse: false,
  9.          language: 'zh-CN'
  10.     });
  1. <div class="col-md-7">
  2.              <div class='input-group date form_date' >
  3.                 <input name="startTm" id="datetimepicker" type='text' class="form-control input-sm" readonly="readonly"/>
  4.                 <span class="input-group-addon input-sm">
  5.                   <span class="glyphicon glyphicon-calendar"></span>
  6.                 </span>
  7.             </div>
  8. /div>

年效果图:

datepicker-mm

 

 

 

 

 

 

 

 

 

代码:

  1. $('#year').datepicker({
  2.                   autoclose: true,
  3.                   format: "yyyy",
  4.                   minViewMode: 2,
  5.                   maxView:'decade',
  6.                   todayHighlight: true
  7.             });

年月效果图:

datepicker-yyyymm

 

 

 

 

 

 

 

 

 

代码:

  1. $('#month').datepicker({
  2.                  autoclose: true,
  3.                   format: "yyyy-mm",
  4.                   minViewMode: 1,
  5.                   maxView:'decade',todayHighlight: true
  6.             });

在这里遇到很多问题:什么日历图标没反映啊,输入框和日历图标对不齐啊,点日历图标把数据清了啊……都是样式问题,所以提供几种样式,一种一种试吧……博大精深啊……
<div class='input-group date form_date' data-date-format="yyyymmdd">
<input name="startTm" id="startTm" type='text' class="form-control input-sm" readonly="readonly"/>
<span class="input-group-addon input-sm">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>

<div class="date input-append" id="datetimepicker">
<div class="input-group">
<input class="form-control input-sm" readonly="readonly" type="text">
<span class="add-on input-group-addon"><i class="icon-remove"></i></span>
<span class="add-on input-group-addon"><i class="icon-th"></i></span></div>
</div>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: