fix(datepicker): fix wrong datepicker-input value for non MM/DD/YYYY …

…locales (#6798) * fix date change value for internationalization * change value setting logic + add test
angular · Sep 11, 2017 · 29399b8 · 29399b8
1 parent a727f97
commit 29399b8
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 3 deletions.
diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts
@@ -112,8 +112,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   /** The value of the input. */
   @Input()
   get value(): D | null {
-    return this._getValidDateOrNull(this._dateAdapter.parse(
-        this._elementRef.nativeElement.value, this._dateFormats.parse.dateInput));
+    return this._value;
   }
   set value(value: D | null) {
     if (value != null && !this._dateAdapter.isDateInstance(value)) {
@@ -123,12 +122,14 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
     value = this._getValidDateOrNull(value);
 
     let oldDate = this.value;
+    this._value = value;
     this._renderer.setProperty(this._elementRef.nativeElement, 'value',
         value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '');
     if (!this._dateAdapter.sameDate(oldDate, value)) {
       this._valueChange.emit(value);
     }
   }
+  private _value: D | null;
 
   /** The minimum valid date. */
   @Input()
@@ -285,6 +286,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
     let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
     this._lastValueValid = !date || this._dateAdapter.isValid(date);
     date = this._getValidDateOrNull(date);
+    this._value = date;
     this._cvaOnChange(date);
     this._valueChange.emit(date);
     this.dateInput.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement));

diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
@@ -11,9 +11,11 @@ import {MdDatepicker} from './datepicker';
 import {MdDatepickerInput} from './datepicker-input';
 import {MdInputModule} from '../input/index';
 import {MdNativeDateModule} from '../core/datetime/index';
-import {DEC, JAN} from '../core/testing/month-constants';
+import {DEC, JAN, SEP} from '../core/testing/month-constants';
 import {createKeyboardEvent, dispatchEvent} from '@angular/cdk/testing';
 import {MdFormFieldModule} from '../form-field/index';
+import {MAT_DATE_LOCALE} from '../core/datetime/date-adapter';
+import {NativeDateModule} from '../core/datetime/index';
 
 describe('MdDatepicker', () => {
   afterEach(inject([OverlayContainer], (container: OverlayContainer) => {
@@ -943,6 +945,45 @@ describe('MdDatepicker', () => {
     });
 
   });
+
+  describe('internationalization', () => {
+    let fixture: ComponentFixture<DatepickerWithi18n>;
+    let testComponent: DatepickerWithi18n;
+    let input: HTMLInputElement;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [
+          MdDatepickerModule,
+          MdFormFieldModule,
+          MdInputModule,
+          MdNativeDateModule,
+          NoopAnimationsModule,
+          NativeDateModule,
+          FormsModule
+        ],
+        providers: [{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}],
+        declarations: [DatepickerWithi18n],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(DatepickerWithi18n);
+      fixture.detectChanges();
+      testComponent = fixture.componentInstance;
+      input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    }));
+
+    it('should have the correct input value even when inverted date format', () => {
+      let selected = new Date(2017, SEP, 1);
+      testComponent.date = selected;
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(input.value).toBe('01.09.2017');
+        expect(testComponent.datepickerInput.value).toBe(selected);
+      });
+    });
+  });
 });
 
 
@@ -1099,3 +1140,15 @@ class DatepickerWithChangeAndInputEvents {
 
   onDateInput() {}
 }
+
+@Component({
+  template: `
+    <input [mdDatepicker]="d" [(ngModel)]="date">
+    <md-datepicker #d></md-datepicker>
+  `
+})
+class DatepickerWithi18n {
+  date: Date | null = new Date(2010, JAN, 1);
+  @ViewChild('d') datepicker: MdDatepicker<Date>;
+  @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput<Date>;
+}