e-ngx-datetimepicker

基于Angular的日期组件。

依赖的第三方插件：bootstrap-datetimepicker

Usage

1. Install

   npm install --save e-ngx-datetimepicker@latest

2. Set in the .angular-cli.json（@angular/cli）

   "styles": [
       "../node_modules/bootstrap/dist/css/bootstrap.min.css",
       "../node_modules/e-ngx-datetimepicker/dist/assets/css/bootstrap-datetimepicker.min.css"
   ],
   "scripts": [
       "../node_modules/jquery/dist/jquery.min.js",
       "../node_modules/moment/min/moment.min.js",
       "../node_modules/moment/min/moment-with-locales.min.js",
       "../node_modules/e-ngx-datetimepicker/dist/assets/js/bootstrap-datetimepicker.min.js",
       "../node_modules/bootstrap/dist/js/bootstrap.min.js"
   ]

3. Add the ENgxDatetimepickerModule

   import {ENgxDatetimepickerModule} from "e-ngx-datetimepicker";
   @NgModule({
       imports: [
           ENgxDatetimepickerModule
       ]
   })

4. Use in Template

   父元素必须设置position: relative

   <form class="form-group" #form="ngForm">
       <div class="form-group" style="position: relative;">
           <label>
               选择日期：
               <input type="text" class="form-control"
                      eNgxDTPicker
                      #eNgxDTPicker="eNgxDTPicker"
                      name="time"
                      [(ngModel)]="datetime"
                      [options]="options"
                      required
                      readonly
                      (ready)="onReady($event)"
                      (changeDate)="onChangeDate($event)">
           </label>
       </div>
   </form>
   <button class="btn btn-primary" (click)="eNgDTPicker.getFn('minDate')('2017-05-01')">设置最小时间（模板调用）</button>
   <button class="btn btn-primary" (click)="setMinDate()">设置最小时间（组件类调用）</button>
   <button class="btn btn-danger" (click)="clearDate()">清空数据</button>

5. Use in Component

   datetimepicker: ENgxDatetimepickerDirective;
   datetime: any;
   options: any = {
       format: 'YYYY-MM-DD hh:mm:ss'
   };
    
   constructor() {}
    
   onReady($event: ENgxDatetimepickerDirective) {
       this.datetimepicker = $event;
   }
    
   onChangeDate($event: any) {
       // console.log($event);
   }
    
   setMinDate() {
       this.datetimepicker.getFn('minDate')('2017-05-01');
   }
    
   clearDate() {
       this.datetime = null;
   }

API

exportAs

• eNgxDTPicker - 导出的指令变量，可在模板获取指令类并调用（#eNgxDTPicker="eNgxDTPicker"）。

Inputs

• options（Object） - 与bootstrap-datetimepicker的配置属性一致

Outputs

• ready - return ($event); datetimepicker初始化完成的事件，$event为当前ENgxDatetimepickerDirective实例

• changeDate - return ($event); 时间改变触发的事件，$event为改变之后的时间（由于这个事件触发的频率低，建议使用这个事件来获取改变之后的时间）

• updateDate - return ($event); 时间视图（比如年视图切换到月视图）改变触发的事件，$event为改变之后的时间

Instance Method

• getFn(fnName: string): Function - 根据函数名称获取bootstrap-datetimepicker函数

• show(): void - 显示日期控件

• hide(): void - 隐藏日期控件

• destroy(): void - 销毁日期控件

Develop

```shell
npm install // 安装依赖包

npm start // 启动项目
```

License