angular2 引用bootstrap-daterangepicker

目前看ag2没有比较好的datetimepicker控件。研究了一下引用js版的bootstrap-daterangepicker.

1.首先配置daterangepicker js的依赖JS框架:

Date Range Picker relies on Bootstrap, jQuery and Moment.js

angular-cli的官网是这么说的:

Global Library Installation

Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the apps[0].scripts and apps[0].styles properties of angular-cli.json.

As an example, to use Bootstrap 4 this is what you need to do:

First install Bootstrap from npm:

npm install bootstrap@next

Then add the needed script files to apps[0].scripts:

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Finally add the Bootstrap CSS to the apps[0].styles array:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app.

不要用npm 下载 bootstrap,moment.直接把压缩包下载后,拷贝到对应的目录。

angular-cli.json中配置,全局的js

这个JQuery,Bootstrap要作为全局的JS进行安装.

在src目录下angular-cli.json文件中配置,全局的js:

"scripts": [
  "assets/jquery/jquery-2.2.3.min.js",
  "assets/bootstrap/js/bootstrap.min.js",
  "assets/moment/moment.min.js",
  "assets/daterangepicker/daterangepicker.js"
],

 

2.复制JQuery,boostrap,daterangepicker的相关CSS及JS

把jquery,bootstrap,daterangepicker的css及js复制到

src/assert目录结构如下:

3.配置JQuery和$的全局的变量

 全局变量配置后，在TypeScript编译器就会认到这个变量，编译就不会报错。

在src的目录下新建:typings.d.ts

declare var $: any;
declare var jQuery: any;

配置2个行记录保存。

4.配置CSS样式

到src目录的index.html文件中导入全局的css样式

<link href="assets/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="assets/font-awesome.min.css" rel="stylesheet">
<link href="assets/adminLTE/css/AdminLTE.min.css" rel="stylesheet" >
<link href="assets/adminLTE/css/skins/skin-blue.min.css" rel="stylesheet">
<link href="assets/daterangepicker/daterangepicker.css" rel="stylesheet">

保存。

5.component组件中引用datatimerpicker

MainPageComponent 的代码:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.css']
})
export class MainPageComponent implements OnInit {

  /*private myDate:Date=new Date();
  private date2:string;
  private time1:string;*/
  constructor() { }

  ngOnInit() {
    this.dateRangePicker();
  }

  dateRangePicker(){
    let picker:any=$('#startEndTime');
    let dataRageOption:Object={
      "timePicker": true,
      "timePicker24Hour": true,
      "drops": "down",
      "opens": "left",
      "locale": {
        "format": "YYYY-MM-DD HH:mm:ss",
        "separator": " -- ",
        "applyLabel": "Apply",
        "cancelLabel": "Cancel",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
        "daysOfWeek": [
          "日",
          "一",
          "二",
          "三",
          "四",
          "五",
          "六"
        ],
        "monthNames": [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "7月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月"
        ],
        "firstDay": 1
      },
      "startDate": "2017-01-25 09:00:00",
      "endDate": "2017-01-25 09:46:00"
    };
    picker.daterangepicker(dataRageOption,function (start,end,label) {
      console.info(`start:${start.format('YYYY-MM-DD')}, end:${end}, label:${label}`);
    });

  }




}

 

main-page.html的代码:

<div class="form-group">
  <label for="startEndTime" class="col-sm-1 control-label">开始结束时间</label>
  <div class="col-sm-7 input-group">
    <input type="text" class="form-control" id="startEndTime"
           name="startEndTime" placeholder="开始-结束时间">
  </div>
</div>

显示效果

重启ng serve

在页面上就可以看到:

个人认为是个不错的东西，所以这里转载下来后面继续再多看看

https://my.oschina.net/condy/blog/830330

顺便贴上这个插件的文档说明网址，好做个对比，深刻了解大概的思路，这里有点想不通的是，个人认为再angular.json中配置了为嘛还要从静态中引入

http://www.daterangepicker.com/