环境：

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