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",否则日期控件中的下拉框显示都会有问题。