angular項目中bootstrap-datetimepicker時間插件的使用

一、需求：

背景系統中經常會使用到的功能，選擇一個時間區間，根據這個時間區間去篩選一些資訊，比如，某一時間段的注冊使用者。

二、最後效果

三、需要引入的檔案（src/index.html）

注意：1、jQuery檔案先引用，因為在初始化日期插件是，需要找到DOM中的對象，添加一些樣式；

2、可以看到，我項目中并沒有引用bootstrap.min.css這個檔案，因為是在index.html全局引用的這個樣式，對已經寫好的樣式有很大的影響，是以産生的影響就是樣式是亂掉的，你看到的效果圖（第一張圖檔）的樣式就需要自己動手啦，寫一個共用的樣式，在每個元件中引用。

具體樣式就不加了，相信如果你引用插件的這個坑淌過來了，這點兒小事兒，就想一顆奶油巧克力，帶着成就感慢慢‘品嘗’吧~ 

四、代碼部分

A、 To Date

（html代碼）

<!--選擇時間 datetimepicker  選擇到天-->
<div>
  <label class="date-label-width">時間（To Date）:</label>
  <div class="input-group date form_datetime date-div-inline">
    <input  type="datetime" size="16" id="startTime" name="startTime" class="date-input-size date-minute-bgcolor" value="" readonly >
    <span class="input-group-addon date-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
  </div>

  <label for="endTime" >-</label>
  <div class="input-group date form_datetime date-div-inline">
    <input type="datetime"  id="endTime" name="endTime" class="date-input-size date-minute-bgcolor" value="" readonly>
    <span class="input-group-addon date-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
  </div>

</div>      

JS代碼

//初始化日期插件 -- 選擇到天
$('#startTime').datetimepicker({
  format: 'yyyy-mm-dd',//顯示格式
  todayHighlight: 1,//今天高亮
  minView: "month",//設定隻顯示到月份
  startView:2,
  forceParse: 0,
  showMeridian: 1,
  autoclose: true,//選擇後自動關閉
  language:  'zh-CN',
  weekStart: 1,
  // todayBtn:  1,
  // autoclose: 1,
  // todayHighlight: 1,
  // startView: 2,
  // minView: 2,
  // forceParse: 0,
  // pickerPosition:'bottom-right'//日期插件彈出的位置
}).on("changeDate", function () {
  $('#endTime').datetimepicker('setStartDate', $("#startTime").val());
  console.log( $("#startTime").val());
  $("#endTime").focus()
});


$('#endTime').datetimepicker({
  format: 'yyyy-mm-dd',//顯示格式
  todayHighlight: 1,//今天高亮
  minView: "month",//設定隻顯示到月份
  startView:2,
  forceParse: 0,
  showMeridian: 1,
  autoclose: true,//選擇後自動關閉
  language:  'zh-CN',
  weekStart: 1,
  // todayBtn:  1,
  // autoclose: 1,
  // todayHighlight: 1,
  // startView: 2,
  // minView: 2,
  // forceParse: 0,
  // pickerPosition:'bottom-right'//日期插件彈出的位置
}).on("changeDate", function () {
  $('#startTime').datetimepicker('setEndDate', $("#endTime").val());
  console.log( $("#endTime").val());

});      

format這個參數可以設定日期的格式，yyyy-mm-dd，yyyy/mm/dd

B、To Minute

(html代碼)

<!--選擇時間 datetimepicker  選擇到分鐘-->
<div>
  <label for="dtp_input1" class="date-label-width">時間（To Minute）：</label>
  <div class="input-group date form_datetime date-div-inline"  data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
    <input class="date-input-size " id="startTimeMinute" size="16" type="text" value="" readonly>
    <span class="input-group-addon date-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
    <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
  </div>
  <input type="hidden" id="dtp_input1" value="" />

  <label for="dtp_input2">-</label>
  <div class="input-group date form_datetime date-div-inline"  data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
    <input class="date-input-size " id="endTimeMinute" size="16" type="text" value="" readonly>
    <span class="input-group-addon date-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
    <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
  </div>
  <input type="hidden" id="dtp_input2" value="" />
</div>      

(JS 代碼)

// //初始化日期插件 -- 選擇到分鐘
$('#startTimeMinute').datetimepicker({
  //language:  'fr',
  format: 'yyyy-mm-dd hh:ii',//顯示格式
  weekStart: 1,
  todayBtn:  1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  forceParse: 0,
  showMeridian: 1

}).on("changeDate", function () {
  $('#endTimeMinute').datetimepicker('setStartDate', $("#startTimeMinute").val());
  console.log( $("#startTimeMinute").val());
  $("#endTimeMinute").focus()
});



$('#endTimeMinute').datetimepicker({
  //language:  'fr',
  format: 'yyyy-mm-dd hh:ii',//顯示格式
  weekStart: 1,
  todayBtn:  1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  forceParse: 0,
  showMeridian: 1

}).on("changeDate", function () {
  $('#startTimeMinute').datetimepicker('setEndDate', $("#endTimeMinute").val());
  console.log( $("#endTimeMinute").val());

});      

注意：因為是一個時間區間，第一個input是開始時間，第二個是結束時間，開始時間必須在結束時間之前，是以，id必須加在input上，而不是div上。

至此，我已經如願看到了理想的效果，準備洗洗睡了，你呢？

歡迎各位大神批評指正。

本文作者：qiangdada

本文釋出時間：2018/03/14

本文來自雲栖社群合作夥伴

開源中國

，了解相關資訊可以關注oschina.net網站。