天天看點

Bootstrap DatetimePicker 小時視圖/日視圖/月視圖/年視圖

今天為一個項目中增加一些功能,用到了DatetimePicker的不同視圖:小時/日/月/年,寫法記錄如下,主要是設定 startView和minView兩個屬性:

//小時視圖
$('#dtpDate1').datetimepicker({
  language:'zh-CN',
  format:'yyyy-mm-dd hh:00',
  weekStart: 1,
  todayBtn:  1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 1,  //小時視圖
  minView: 1,
})

//日視圖
$('#dtpDate1').datetimepicker({
  language:'zh-CN',
  format:'yyyy-mm-dd',
  weekStart: 1,
  todayBtn:  1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,  //日視圖
  minView: 2,
})

//月視圖
$('#dtpDate1').datetimepicker({
  language:'zh-CN',
  format:'yyyy-mm',   
  todayBtn:  1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 3, //月視圖
  minView: 3,
})

//年視圖
$('#dtpDate1').datetimepicker({
  language:'zh-CN',
  format:'yyyy',
  weekStart: 1,
  todayBtn:  1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 4, //年視圖
  minView: 4,
})      

效果:

Bootstrap DatetimePicker 小時視圖/日視圖/月視圖/年視圖
Bootstrap DatetimePicker 小時視圖/日視圖/月視圖/年視圖
Bootstrap DatetimePicker 小時視圖/日視圖/月視圖/年視圖
Bootstrap DatetimePicker 小時視圖/日視圖/月視圖/年視圖

繼續閱讀