angular2 引用bootstrap-daterangepicker

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

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

Date Range Picker relies onBootstrap,jQueryandMoment.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 theapps[0].scriptsandapps[0].stylesproperties ofangular-cli.json.

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

First install Bootstrap fromnpm:

npm install bootstrap@next

Then add the needed script files toapps[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 theapps[0].stylesarray:

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

Restartng serveif 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

在页面上就可以看到: