目前看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/