Angular6集成bootstrap dateRangePicker

港控/mmm° 2023-02-18 05:26 17阅读 0赞

环境：

Angular6

需求：

angular环境下的表单开发，需要用到时间控件，在网上看到最多的是集成bootstrap的dateRangePicker,但是很多都是直接贴过来的，还存在一些实用性的问题，这里记录下自己的集成过程。

一、首先确保自己的angular环境是可运行的，然后下载dateRangePicker所需文件。下面是结合网上的文档，做过调整后的dateRangePicker源码

百度网盘地址：[https://pan.baidu.com/s/1XPN45LLTuTqKb8JWucNvDQ][https_pan.baidu.com_s_1XPN45LLTuTqKb8JWucNvDQ]

提取码：6npp

![20200616103708780.png][]

二、将上面3个文件放在angular项目的src/asset目录下

![20200616103809618.png][]

三、在angular.json文件中将上面的样式文件和js文件引入，当然，还要引入jquery，我这里之前已经安装好了，如果没有，需要先安装jquery

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70][]

四，创建公共的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页面中的输入框

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

[https_pan.baidu.com_s_1XPN45LLTuTqKb8JWucNvDQ]: https://pan.baidu.com/s/1XPN45LLTuTqKb8JWucNvDQ
[20200616103708780.png]: https://img-blog.csdnimg.cn/20200616103708780.png
[20200616103809618.png]: https://img-blog.csdnimg.cn/20200616103809618.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616104050122.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw==,size_16,color_FFFFFF,t_70