fix(datepicker): make it valid in case of empty input (#1247)

Closes #1182

src/framework/theme/components/datepicker/datepicker.directive.ts

@@ -360,6 +360,14 @@ export class NbDatepickerDirective<D> implements OnDestroy, ControlValueAccessor
  * Validates that we can parse value correctly.
  * */
  protected parseValidator(): ValidationErrors | null {
+ /**
+ * Date services treat empty string as invalid date.
+ * That's why we're getting invalid formControl in case of empty input which is not required.
+ * */
+ if (this.inputValue === '') {
+ return null;
+ }
+
  const isValid = this.datepickerAdapter.isValid(this.inputValue, this.picker.format);
  return isValid ? null : { nbDatepickerParse: { value: this.inputValue } };
  }

src/framework/theme/components/datepicker/datepicker.spec.ts

@@ -7,6 +7,7 @@
 import { ApplicationRef, Component, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { NbDatepickerDirective } from '@nebular/theme';
 
 import { NbDatepickerModule } from './datepicker.module';
 import { NbThemeModule } from '../../theme.module';
@@ -27,12 +28,14 @@ import { NbDatepickerComponent } from './datepicker.component';
 })
 export class NbDatepickerTestComponent {
  @ViewChild(NbDatepickerComponent) datepicker: NbDatepickerComponent<Date>;
+ @ViewChild(NbDatepickerDirective) datepickerDirective: NbDatepickerDirective<Date>;
 }
 
 describe('nb-datepicker', () => {
  let fixture: ComponentFixture<NbDatepickerTestComponent>;
  let appRef: ApplicationRef;
  let datepicker: NbDatepickerComponent<Date>;
+ let datepickerDirective: NbDatepickerDirective<Date>;
  let overlay: HTMLElement;
  let input: HTMLInputElement;
 
@@ -60,6 +63,7 @@ describe('nb-datepicker', () => {
 
  beforeEach(() => {
  datepicker = fixture.componentInstance.datepicker;
+ datepickerDirective = fixture.componentInstance.datepickerDirective;
  overlay = fixture.nativeElement.querySelector('nb-layout');
  input = fixture.nativeElement.querySelector('input');
  });
@@ -108,4 +112,16 @@ describe('nb-datepicker', () => {
 
  expect(cell.textContent).toContain('17');
  });
+
+ it('should be valid if empty', () => {
+ expect(datepickerDirective.validate()).toBe(null);
+ });
+
+ it('should not be valid if empty contain incorrectly formatted date', () => {
+ input.value = 'somecurruptedinput';
+ input.dispatchEvent(new Event('input'));
+ showDatepicker();
+
+ expect(datepickerDirective.validate()).not.toBe(null);
+ });
 });