docs(module:datapicker): fix date range no disabled hours minute and …

…second (#102)
NG-ZORRO · Aug 31, 2017 · 25d2191 · 25d2191
1 parent 4b207ed
commit 25d2191
Showing 1 changed file with 32 additions and 1 deletion.
diff --git a/src/showcase/nz-demo-datepicker/nz-demo-datepicker-start-end.component.ts b/src/showcase/nz-demo-datepicker/nz-demo-datepicker-start-end.component.ts
@@ -1,15 +1,23 @@
 import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
 
 @Component({
   selector: 'nz-demo-datepicker-start-end',
   template: `
     <nz-datepicker style="width: 40%;" (ngModelChange)="_startDate=$event;_startValueChange()" [ngModel]="_startDate" [nzDisabledDate]="_disabledStartDate" [nzShowTime]="true" [nzFormat]="'YYYY-MM-DD HH:mm:ss'" [nzPlaceHolder]="'Start date'"></nz-datepicker>
-    <nz-datepicker style="width: 40%;" (ngModelChange)="_endDate=$event;_endValueChange()" [ngModel]="_endDate" [nzDisabledDate]="_disabledEndDate" [nzShowTime]="true" [nzFormat]="'YYYY-MM-DD HH:mm:ss'" [nzPlaceHolder]="'End date'"></nz-datepicker>`,
+    <nz-datepicker style="width: 40%;" (ngModelChange)="_endDate=$event;_endValueChange()" [ngModel]="_endDate" [nzDisabledDate]="_disabledEndDate" [nzShowTime]="_endTime" [nzFormat]="'YYYY-MM-DD HH:mm:ss'" [nzPlaceHolder]="'End date'"></nz-datepicker>`,
   styles  : []
 })
 export class NzDemoDatePickerStartEndComponent implements OnInit {
   _startDate = null;
   _endDate = null;
+  newArray = (len) => {
+    const result = [];
+    for (let i = 0; i < len; i++) {
+      result.push(i);
+    }
+    return result;
+  };
   _startValueChange = () => {
     if (this._startDate > this._endDate) {
       this._endDate = null;
@@ -32,6 +40,29 @@ export class NzDemoDatePickerStartEndComponent implements OnInit {
     }
     return endValue.getTime() <= this._startDate.getTime();
   };
+  get _isSameDay() {
+    return this._startDate && this._endDate && moment(this._startDate).isSame(this._endDate, 'day')
+  }
+  get _endTime() {
+    return {
+      nzHideDisabledOptions: true,
+      nzDisabledHours: () => {
+        return this._isSameDay ? this.newArray(this._startDate.getHours()) : [];
+      },
+      nzDisabledMinutes: (h) => {
+        if (this._isSameDay && h === this._startDate.getHours()) {
+          return this.newArray(this._startDate.getMinutes());
+        }
+        return [];
+      },
+      nzDisabledSeconds: (h, m) => {
+        if (this._isSameDay && h === this._startDate.getHours() && m === this._startDate.getMinutes()) {
+          return this.newArray(this._startDate.getSeconds());
+        }
+        return [];
+      }
+    }
+  }
 
   constructor() {
   }