add locale switching to demo

Author: mmalerba

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

@@ -107,4 +107,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

@@ -182,6 +182,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 ?
@@ -228,6 +230,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() {
@@ -245,6 +252,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
 
   ngOnDestroy() {
     this._datepickerSubscription.unsubscribe();
+    this._localeSubscription.unsubscribe();
     this._valueChange.complete();
     this._disabledChange.complete();
   }

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;