bootstrap datetimepicker 在 angular 項目中的運用

datetimepocker 是一個日期時間選擇器，bootstrap datetimepicker 是 bootstrap 日期時間表單組件。訪問 bootstrap-datetimepicker 。

此次在項目中用到日期時間選擇器，分享其用法和總結。

1、截圖

功能完成後的項目截圖

1. 時間起止輸入框

2. 十年視圖

3. 年視圖

4. 月視圖

5. 日視圖

6. 時視圖

2、依賴

1. 須要 bootstrap 的下拉菜單組件 (dropdowns.less) 的某些樣式，還有 bootstrap 的 sprites (sprites.less and associated images) 中的箭頭圖標。 

先安裝 less

• 安裝淘寶鏡像(可能因爲網絡慢或被牆的緣由，npm可能沒法訪問到)  npm install -g cnpm --registry=https://registry.npm.taobao.org
• 安裝 less cnpm install -g less  (lessc -v返回了版本號說明安裝成功)

而後編譯 build/build_standalone.less  lessc build/build_standalone.less datetimepicker.css

3、選擇器需求

1. 初始化時，開始時間爲當前時間減去一年，結束時間爲當前時間。

2. 時間格式爲 "2018-09-28 00:00:00 "。

3. 開始時間不能大於結束時間。

4. 開始時間不能大於當前時間。

5. 結束時間不能大於當前時間。

4、引入依賴

在 .angular-cli.json 文件中引入 bootstrap-datetimepicker.min.css(剛剛編譯成的 datetimepicker.css 的壓縮版)，bootstrap-datetimepicker.min.js, bootstrap-datetimepicker.zh-CN.js(簡體中文格式)。

5、實現

選擇器模板，因爲該模板不是表單，因此使用雙向數據綁定模板語法，將選擇的時間流向組件處理，在顯示到視圖。

當錯誤提示爲空時，將其隱藏。

<div class="start-end-time-search search-item">
    <label for="startTime" class="search-label start-time-label">起止時間</label>
    <input type="text" [(ngModel)]="startTime" placeholder="請選擇開始時間" readonly id="startTime" class="search-input start-time-input">
    <label for="endTime" class="search-label end-time-label">至</label>
    <input type="text" [(ngModel)]="endTime" placeholder="請選擇結束時間" readonly id="endTime" class="search-input end-time-input">
</div>
<button type="button" class="bg-btn search-btn" (click)="searchByKeyword()"
        [title]="isEnabledSearchBtn ? '查詢離線記錄' : '不可用(時間選擇不正確)'"
        [class.isDisabled]="!isEnabledSearchBtn">
  <i class="iconfont icon-search"></i> 查詢
</button>
<span class="error-tip" [hidden]="!startTimeErrorTip">{{startTimeErrorTip}}</span>
<span class="error-tip" [hidden]="!endTimeErrorTip">{{endTimeErrorTip}}</span>

選擇器組件

定義公有屬性並賦值，將開始時間和結束時間賦值爲空字符串。

/*定義公有屬性*/
public startTime: string = "";
public endTime: string = "";
public isEnabledSearchBtn: boolean = true;  // 查詢按鈕是可用的
public startTimeErrorTip: string = ""; // 開始時間選擇錯誤提示
public endTimeErrorTip: string = ""; // 結束時間選擇錯誤提示

將日期時間格式化，當出現一位數的格式時將其前面加 "0"。並返回兩種日期時間格式，一種對象，便於拆分，設置開始時間爲當前時間減一年。一種字符串，拼接好的格式。

/*
* 日期時間格式化
* 日期時間格式 "2018-09-28 00:00:00"
* */
dateTimeFormat(dateTime) {
  let dateTimeObj = {
      "year": dateTime.getFullYear(),
      "month": dateTime.getMonth() + 1,
      "day": dateTime.getDate(),
      "hours": dateTime.getHours(),
      "minutes": dateTime.getMinutes(),
      "seconds": dateTime.getSeconds()
    };
  for (let k in dateTimeObj) {
    if (dateTimeObj[k] < 10) {
      dateTimeObj[k] = "0" + dateTimeObj[k];
    }
  }
  let dateTimeString = dateTimeObj.year + "-" + dateTimeObj.month + "-" + dateTimeObj.day + " "
    + dateTimeObj.hours + ":" + dateTimeObj.minutes + ":" + dateTimeObj.seconds;
  return {"obj": dateTimeObj, "string": dateTimeString};
}

這裏的當前時間有兩種，初始化時和選中時間的時候， 選中時間的當前時間要寫在日期被改變時的方法中。

/*頁面初始化時，填充時間*/
ngOnInit() {
  this.isEnabledSearchBtn = true;  // 初始化默認選擇按鈕可用

  let initNowTime = this.dateTimeFormat(new Date());

  // 開始時間用當前時間減去一年，結束時間使用當前時間。
  this.startTime = initNowTime.obj.year - 1 + "-" + initNowTime.obj.month + "-" + initNowTime.obj.day + " "
                   + initNowTime.obj.hours + ":" + initNowTime.obj.minutes + ":" + initNowTime.obj.seconds;

  this.endTime = initNowTime.string;

  /*下面處理選擇的時間*/
  let jQuery: any = $;
  let that = this;
  jQuery("#startTime").datetimepicker({
    autoclose: true,  // 選擇完成自動關閉時間選擇器
    format: "yyyy-mm-dd hh:ii:ss",  // 時間格式
    language: "zh-CN",  // 使用簡體中文
    todayBtn: "linked",  // 選擇器底部顯示今天，快速選擇當前時間
    todayHighlight: true,  // 高亮顯示今天，或已被選擇的時間
    zIndexOffset: 1000  // UI，避免被其餘設置了 z-index 樣式的元素覆蓋
  }).on("changeDate", function(startTime){ // 日期被改變時觸發
    /*選中時間的時候的當前時間格式化*/
    let nowTimeString = that.dateTimeFormat(new Date()).string;

    that.startTime = that.dateTimeFormat(startTime.date).string;

    if (that.startTime > nowTimeString) {
      that.startTimeErrorTip = "開始時間不能大於當前時間";
      that.isEnabledSearchBtn = false;
    } else if (that.startTime > that.endTime) {
      that.startTimeErrorTip = "開始時間不能大於結束時間";
      that.isEnabledSearchBtn = false;
    } else {
      that.startTimeErrorTip = "";
      that.endTimeErrorTip = "";
      that.isEnabledSearchBtn = true;
    }
  }).data('datetimepicker');

  jQuery("#endTime").datetimepicker({
    autoclose: true,
    format: "yyyy-mm-dd hh:ii:ss",
    language: "zh-CN",
    todayBtn: "linked",
    todayHighlight: true,
    zIndexOffset: 1000
  }).on("changeDate", function(endTime) {
    /*選中時間的時候的當前時間格式化*/
    let nowTimeString = that.dateTimeFormat(new Date()).string;

    that.endTime = that.dateTimeFormat(endTime.date).string;

    if (that.endTime > nowTimeString) {
      that.endTimeErrorTip = "結束時間不能大於當前時間";
      that.isEnabledSearchBtn = false;
    } else if (that.startTime > that.endTime) {
      that.endTimeErrorTip = "結束時間不能小於開始時間";
      that.isEnabledSearchBtn = false;
    } else {
      that.startTimeErrorTip = "";
      that.endTimeErrorTip = "";
      that.isEnabledSearchBtn = true;
    }
  }).data('datetimepicker');
}

 6、錯誤提示演示

時間選擇錯誤時，給出提示，而且查詢按鈕不可用(提示選擇正確的時間)。