fix(datepicker): mark dates without a day as invalid

Fixes #1278 Closes #1279
ng-bootstrap · Feb 2, 2017 · c57f913 · c57f913
1 parent f3d69d8
commit c57f913
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/datepicker/datepicker-input.spec.ts b/src/datepicker/datepicker-input.spec.ts
@@ -103,6 +103,21 @@ describe('NgbInputDatepicker', () => {
          fixture.detectChanges();
          tick();
          expect(input.value).toBe('');
+
+         fixture.componentInstance.date = new NgbDate(2017, 2, null);
+         fixture.detectChanges();
+         tick();
+         expect(input.value).toBe('');
+
+         fixture.componentInstance.date = new NgbDate(2017, null, 5);
+         fixture.detectChanges();
+         tick();
+         expect(input.value).toBe('');
+
+         fixture.componentInstance.date = new NgbDate(null, 2, 5);
+         fixture.detectChanges();
+         tick();
+         expect(input.value).toBe('');
        }));
 
     it('should propagate null to model when a user enters invalid date', () => {
@@ -114,6 +129,9 @@ describe('NgbInputDatepicker', () => {
 
       inputDebugEl.triggerEventHandler('change', {target: {value: '300000-1-1'}});
       expect(fixture.componentInstance.date).toBeNull();
+
+      inputDebugEl.triggerEventHandler('change', {target: {value: '2017-2- '}});
+      expect(fixture.componentInstance.date).toBeNull();
     });
 
     it('should propagate disabled state', fakeAsync(() => {

diff --git a/src/datepicker/datepicker-input.ts b/src/datepicker/datepicker-input.ts
@@ -21,6 +21,7 @@ import {NgbDateParserFormatter} from './ngb-date-parser-formatter';
 
 import {positionElements} from '../util/positioning';
 import {NgbDateStruct} from './ngb-date-struct';
+import {NgbCalendar} from './ngb-calendar';
 import {NgbDatepickerService} from './datepicker-service';
 
 const NGB_DATEPICKER_VALUE_ACCESSOR = {
@@ -118,7 +119,7 @@ export class NgbInputDatepicker implements ControlValueAccessor {
   constructor(
       private _parserFormatter: NgbDateParserFormatter, private _elRef: ElementRef, private _vcRef: ViewContainerRef,
       private _renderer: Renderer, private _cfr: ComponentFactoryResolver, ngZone: NgZone,
-      private _service: NgbDatepickerService) {
+      private _service: NgbDatepickerService, private _calendar: NgbCalendar) {
     this._zoneSubscription = ngZone.onStable.subscribe(() => {
       if (this._cRef) {
         positionElements(this._elRef.nativeElement, this._cRef.location.nativeElement, 'bottom-left');
@@ -131,8 +132,8 @@ export class NgbInputDatepicker implements ControlValueAccessor {
   registerOnTouched(fn: () => any): void { this._onTouched = fn; }
 
   writeValue(value) {
-    this._model =
-        value ? this._service.toValidDate({year: value.year, month: value.month, day: value.day}, null) : null;
+    const ngbDate = value ? new NgbDate(value.year, value.month, value.day) : null;
+    this._model = this._calendar.isValid(value) ? ngbDate : null;
     this._writeModelValue(this._model);
   }