Angular6集成bootstrap dateRangePicker

環境：

    Angular6

需求：

      angular環境下的表單開發，需要用到時間控件，在網上看到最多的是集成bootstrap的dateRangePicker,但是很多都是直接貼過來的，還存在一些實用性的問題，這裏記錄下自己的集成過程。

 

一、首先確保自己的angular環境是可運行的，然後下載dateRangePicker所需文件。下面是結合網上的文檔，做過調整後的dateRangePicker源碼

百度網盤地址：https://pan.baidu.com/s/1XPN45LLTuTqKb8JWucNvDQ

提取碼：6npp

二、將上面3個文件放在angular項目的src/asset目錄下

三、在angular.json文件中將上面的樣式文件和js文件引入，當然，還要引入jquery，我這裏之前已經安裝好了，如果沒有，需要先安裝jquery

 四，創建公共的ts文件common.ts,進行封裝，當然，你也可以不封裝，這裏我做了封裝，方便業務的調用

import {Inject, LOCALE_ID} from '@angular/core';
declare let $: any;
declare let moment;

/**
 * 定義公共方法
 * @param id
 */

/**
 * 獲取時間控件，顯示年月日，時分秒
 * @param id 日期控件在界面的id
 * @param formObj 日期控件所在form對象
 * @param dateInputControlName 日期控件所在formController 的name值
 * @param showStartDate 打開日期框，定位的時間
 * 例如<input type="text" id="id"  formControlName="dateInputControlName">
 */
export  function dateTimeRangePicker(id: string, formObj: any, dateInputControlName: string, showStartDate: string) {
  if (null == showStartDate || '' === showStartDate || 'undefined' === showStartDate) {
    showStartDate = moment().hours(0).minutes(0).seconds(0);
  } else {
    showStartDate = moment(showStartDate);
  }
  const locale = {
    'format': 'YYYY-MM-DD HH:mm:ss',
    'separator': ' - ',
    'applyLabel': '確定',
    'cancelLabel': '取消',
    'fromLabel': '起始時間',
    'toLabel': '結束時間',
    'customRangeLabel': '自定義',
    'weekLabel': 'W',
    'daysOfWeek': ['日', '一', '二', '三', '四', '五', '六'],
    'monthNames': ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    'firstDay': 1
  };
  const picker: any = $('#' + id);
  const dataRageOption: Object = {
    'locale': locale,
    autoApply: true, // 選擇日期後自動提交;只有在不顯示時間的時候起作用timePicker:false
    showDropdowns: true, // 年月份下拉框
    timePicker: true, // 顯示時間
    timePicker24Hour: true, // 時間制
    timePickerSeconds: true, // 時間顯示到秒
    singleDatePicker: true,  // 單日曆
    startDate: showStartDate // moment().hours(0).minutes(0).seconds(0), // 設置開始日期 moment().subtract(6, 'days'),
    // endDate: moment()

  };

  // picker.daterangepicker(dataRageOption, function (start, end, label) {
  //   console.log(`start:${start.format('YYYY-MM-DD HH:mm:ss')}, end:${end}, label:${label}`);
  //   console.log('1111111111111111111111111111111111');
  //   console.log(dateInputControlName);
  //   formObj.get('' + dateInputControlName + '').patchValue(`${start.format('YYYY-MM-DD HH:mm:ss')}`);
  // });

  picker.daterangepicker(dataRageOption,  (start, end, label) => {
    // 選擇日期後後的回調函數
    // console.log(`start:${start.format('YYYY-MM-DD HH:mm:ss')}, end:${end}, label:${label}`);
    formObj.get('' + dateInputControlName + '').patchValue(`${start.format('YYYY-MM-DD HH:mm:ss')}`);
  });

}

/**
 * 獲取時間控件，顯示年月日，時分秒
 * @param id 日期控件在界面的id
 * @param formObj 日期控件所在form對象
 * @param dateInputControlName 日期控件所在formController 的name值
 * @param showStartDate 打開日期框，定位的時間
 * 例如<input type="text" id="id"  formControlName="dateInputControlName">
 */
export  function dateRangePicker(id: string, formObj: any, dateInputControlName: string, showStartDate: string) {
  if (null == showStartDate || '' === showStartDate || 'undefined' === showStartDate) {
    showStartDate = moment().subtract(6, 'days');
  } else {
    showStartDate = moment(showStartDate);
  }
  const locale = {
    'format': 'YYYY-MM-DD',
    'separator': ' - ',
    'applyLabel': '確定',
    'cancelLabel': '取消',
    'fromLabel': '起始時間',
    'toLabel': '結束時間',
    'customRangeLabel': '自定義',
    'weekLabel': 'W',
    'daysOfWeek': ['日', '一', '二', '三', '四', '五', '六'],
    'monthNames': ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    'firstDay': 1
  };
  const picker: any = $('#' + id);
  const dataRageOption: Object = {
    'locale': locale,
    autoApply: true,
    showDropdowns: true,
    timePicker: false,
    timePicker24Hour: false,
    timePickerSeconds: false,
    singleDatePicker: true, // 顯示單個的時間框，而不是範圍
    startDate: showStartDate, // 設置開始日期 moment().subtract(6, 'days'),
    // endDate: moment()

  };

  // picker.daterangepicker(dataRageOption, function (start, end, label) {
  //   console.log(`start:${start.format('YYYY-MM-DD HH:mm:ss')}, end:${end}, label:${label}`);
  //   console.log('1111111111111111111111111111111111');
  //   console.log(dateInputControlName);
  //   formObj.get('' + dateInputControlName + '').patchValue(`${start.format('YYYY-MM-DD HH:mm:ss')}`);
  // });

  picker.daterangepicker(dataRageOption,  (start, end, label) => {
    // console.log(`start:${start.format('YYYY-MM-DD ')}, end:${end}, label:${label}`);
    formObj.get('' + dateInputControlName + '').patchValue(`${start.format('YYYY-MM-DD')}`);
  });
}

五、我是在angular中使用了bootstrap,然後在bootstrap的modal中有表單，表單中構建日期框，因而是html頁面中的輸入框

<input type="text" class="form-control" id="serverCreateTime"   formControlName="serverCreateTime"  placeholder="創建時間" ng-model="addFormModal">

注意上面的id和formControlName兩個屬性，這個是後面控制類調用封裝的控件需要用到的

六，在控制類的 ngAfterViewInit（）方法中調用構建日期控件

  ngAfterViewInit() {
    dateTimeRangePicker('serverCreateTime', this.serverForm, 'serverCreateTime', null);
  }

注意上面的四個參數，

• serverCreateTime:是html界面中元素id;
• this.serverForm:是html頁面中form表單中angular的formGroup表單組對象
• serverCreateTime:是html頁面中的時間input控件中的formControlName屬性值
• null:最後一個null值，這裏假如是修改頁面的話，要傳當前日期輸入框中的日期，新增就不需要，傳什麼值，日期控件點開的時候就顯示什麼時間。

注意點1：初始化調用時，網上大部分的資料都是說在ngOninit（）方法中調用，我這裏是不行的，只能放在ngAfterViewInit裏面調用纔有效果，

注意點2：在正常的界面沒問題，但是放在bootstrap的modal彈框中的話，需要去掉modal代碼段的tabIndex="-1",否則日期控件中的下拉框顯示都會有問題。