add locale switching to demo

Author: mmalerba

src/demo-app/datepicker/datepicker-demo.html

@@ -101,4 +101,9 @@ <h2>Input disabled, datepicker popup enabled</h2>
 </p>
 
 <h2>Moment.js Datepicker</h2>
-<p><demo-moment-datepicker></demo-moment-datepicker></p>
+<p>
+  <md-select placeholder="Locale" [(ngModel)]="locale">
+    <md-option *ngFor="let l of locales" [value]="l">{{l}}</md-option>
+  </md-select>
+</p>
+<p><demo-moment-datepicker [locale]="locale"></demo-moment-datepicker></p>

src/demo-app/datepicker/datepicker-demo.ts

@@ -21,6 +21,8 @@ export class DatepickerDemo {
   date: Date;
   lastDateInput: Date | null;
   lastDateChange: Date | null;
+  locales = ['en', 'fr', 'ja'];
+  locale = 'en';
 
   dateFilter = (date: Date) => date.getMonth() % 2 == 1 && date.getDate() % 2 == 0;
 

src/demo-app/datepicker/moment-datepicker.html

@@ -1,3 +1,5 @@
-<input mdInput [mdDatepicker]="picker" [(ngModel)]="date" placeholder="Moment.js datepicker">
-<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
-<md-datepicker #picker></md-datepicker>
+<md-form-field>
+  <input mdInput [mdDatepicker]="picker" [(ngModel)]="date" placeholder="Moment.js datepicker">
+  <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
+  <md-datepicker #picker></md-datepicker>
+</md-form-field>

src/demo-app/datepicker/moment-datepicker.ts

@@ -1,7 +1,7 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@angular/core';
 import {DateAdapter, MAT_DATE_LOCALE_PROVIDER, MD_DATE_FORMATS} from '@angular/material';
 import {MomentDateAdapter, MD_MOMENT_DATE_FORMATS} from '@angular/material-moment-adapter';
-import moment from 'moment';
+import * as moment from 'moment';
 
 
 @Component({
@@ -16,5 +16,12 @@ import moment from 'moment';
   ],
 })
 export class DemoMomentDatepicker {
+  @Input()
+  set locale(value: string) {
+    this._dateAdapter.setLocale(value);
+  }
+
   date = moment();
+
+  constructor(private _dateAdapter: DateAdapter<any>) {}
 }

src/lib/core/datetime/date-adapter.ts

@@ -7,6 +7,9 @@
  */
 
 import {InjectionToken, LOCALE_ID} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {Subject} from 'rxjs/Subject';
+
 
 /** InjectionToken for datepicker that can be used to override default locale code. */
 export const MAT_DATE_LOCALE = new InjectionToken<string>('MAT_DATE_LOCALE');
@@ -19,6 +22,10 @@ export abstract class DateAdapter<D> {
   /** The locale to use for all dates. */
   protected locale: any;
 
+  /** A stream that emits when the locale changes. */
+  get localeChanges(): Observable<void> { return this._localeChanges; }
+  protected _localeChanges= new Subject<void>();
+
   /**
    * Gets the year component of the given date.
    * @param date The date to extract the year from.
@@ -184,6 +191,7 @@ export abstract class DateAdapter<D> {
    */
   setLocale(locale: any) {
     this.locale = locale;
+    this._localeChanges.next();
   }
 
   /**

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()
@@ -173,6 +174,8 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
 
   private _datepickerSubscription = Subscription.EMPTY;
 
+  private _localeSubscription = Subscription.EMPTY;
+
   /** The form control validator for whether the input parses. */
   private _parseValidator: ValidatorFn = (): ValidationErrors | null => {
     return this._lastValueValid ?
@@ -219,6 +222,11 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
     if (!this._dateFormats) {
       throw createMissingDateImplError('MD_DATE_FORMATS');
     }
+
+    // Update the displayed date when the locale changes.
+    this._localeSubscription = _dateAdapter.localeChanges.subscribe(() => {
+      this.value = this.value;
+    });
   }
 
   ngAfterContentInit() {
@@ -236,6 +244,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
 
   ngOnDestroy() {
     this._datepickerSubscription.unsubscribe();
+    this._localeSubscription.unsubscribe();
   }
 
   registerOnValidatorChange(fn: () => void): void {
@@ -285,6 +294,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));

src/material-moment-adapter/adapter/moment-date-adapter.spec.ts

@@ -330,6 +330,10 @@ describe('MomentDateAdapter', () => {
     expect(parsedDate).not.toBe(date);
   });
 
+  it('should parse empty string as null', () => {
+    expect(adapter.parse('', 'MM/DD/YYYY')).toBeNull();
+  });
+
   it('should parse invalid value as invalid', () => {
     let d = adapter.parse('hello', 'MM/DD/YYYY');
     expect(d).not.toBeNull();

src/material-moment-adapter/adapter/moment-date-adapter.ts

@@ -138,7 +138,7 @@ export class MomentDateAdapter extends DateAdapter<moment.Moment> {
   }
 
   parse(value: any, parseFormat: string | string[]): moment.Moment | null {
-    if (typeof value == 'string') {
+    if (value && typeof value == 'string') {
       return moment(value, parseFormat, this.locale);
     }
     return value ? moment(value).locale(this.locale) : null;