pass through format options

src/demo-app/demo-app-module.ts

@@ -1,19 +1,20 @@
-import {NgModule, ApplicationRef} from '@angular/core';
+import {ApplicationRef, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {HttpModule} from '@angular/http';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {DemoApp, Home} from './demo-app/demo-app';
 import {
-  MaterialModule,
-  OverlayContainer,
   FullscreenOverlayContainer,
-  MdSelectionModule, MdNativeDateModule,
+  MaterialModule,
+  MdNativeDateModule,
+  MdSelectionModule,
+  OverlayContainer
 } from '@angular/material';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
-import {JazzDialog, ContentElementDialog, DialogDemo, IFrameDialog} from './dialog/dialog-demo';
+import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './dialog/dialog-demo';
 import {RippleDemo} from './ripple/ripple-demo';
 import {IconDemo} from './icon/icon-demo';
 import {GesturesDemo} from './gestures/gestures-demo';
@@ -27,18 +28,18 @@ import {ListDemo} from './list/list-demo';
 import {BaselineDemo} from './baseline/baseline-demo';
 import {GridListDemo} from './grid-list/grid-list-demo';
 import {LiveAnnouncerDemo} from './live-announcer/live-announcer-demo';
-import {OverlayDemo, SpagettiPanel, RotiniPanel} from './overlay/overlay-demo';
+import {OverlayDemo, RotiniPanel, SpagettiPanel} from './overlay/overlay-demo';
 import {SlideToggleDemo} from './slide-toggle/slide-toggle-demo';
 import {ToolbarDemo} from './toolbar/toolbar-demo';
 import {ButtonDemo} from './button/button-demo';
-import {MdCheckboxDemoNestedChecklist, CheckboxDemo} from './checkbox/checkbox-demo';
+import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from './checkbox/checkbox-demo';
 import {SelectDemo} from './select/select-demo';
 import {SliderDemo} from './slider/slider-demo';
 import {SidenavDemo} from './sidenav/sidenav-demo';
 import {SnackBarDemo} from './snack-bar/snack-bar-demo';
 import {PortalDemo, ScienceJoke} from './portal/portal-demo';
 import {MenuDemo} from './menu/menu-demo';
-import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tabs/tabs-demo';
+import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from './tabs/tabs-demo';
 import {PlatformDemo} from './platform/platform-demo';
 import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
 import {InputDemo} from './input/input-demo';

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

@@ -58,15 +58,6 @@ export abstract class DateAdapter<D> {
    */
   abstract getYearName(date: D): string;
 
-  /**
-   * Gets the name for the month and year of the given date.
-   * @param date The date to get the month and year name for.
-   * @param monthStyle The naming style for the month
-   *     (e.g. long = 'January', short = 'Jan', narrow = 'J').
-   * @returns The name of the month and year of the given date (e.g. 'Jan 2017').
-   */
-  abstract getMonthYearName(date: D, monthStyle: 'long' | 'short' | 'narrow'): string;
-
   /**
    * Gets the first day of the week.
    * @returns The first day of the week (0-indexed, 0 = Sunday).
@@ -106,18 +97,19 @@ export abstract class DateAdapter<D> {
   /**
    * Parses a date from a value.
    * @param value The value to parse.
-   * @param fmt The expected format of the value being parsed (type is implementation-dependent).
+   * @param parseFormat The expected format of the value being parsed
+   *     (type is implementation-dependent).
    * @returns The parsed date, or null if date could not be parsed.
    */
-  abstract parse(value: any, fmt?: any): D | null;
+  abstract parse(value: any, parseFormat: any): D | null;
 
   /**
    * Formats a date as a string.
    * @param date The value to parse.
-   * @param fmt The format to use for the result string.
+   * @param displayFormat The format to use to display the date as a string.
    * @returns The parsed date, or null if date could not be parsed.
    */
-  abstract format(date: D, fmt?: any): string;
+  abstract format(date: D, displayFormat: any): string;
 
   /**
    * Adds the given number of years to the date. Years are counted as if flipping 12 pages on the

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

@@ -104,23 +104,6 @@ describe('NativeDateAdapter', () => {
     expect(adapter.getYearName(new Date(2017, JAN, 1))).toBe('2017年');
   });
 
-  it('should get long month and year name', () => {
-    expect(adapter.getMonthYearName(new Date(2017, JAN, 1), 'long')).toBe('January 2017');
-  });
-
-  it('should get short month and year name', () => {
-    expect(adapter.getMonthYearName(new Date(2017, JAN, 1), 'short')).toBe('Jan 2017');
-  });
-
-  it('should get narrow month and year name', () => {
-    expect(adapter.getMonthYearName(new Date(2017, JAN, 1), 'narrow')).toBe('J 2017');
-  });
-
-  it('should get month and year name in a different locale', () => {
-    adapter.setLocale('ja-JP');
-    expect(adapter.getMonthYearName(new Date(2017, JAN, 1), 'long')).toBe('2017年1月');
-  });
-
   it('should get first day of week', () => {
     expect(adapter.getFirstDayOfWeek()).toBe(0);
   });

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

@@ -85,15 +85,6 @@ export class NativeDateAdapter extends DateAdapter<Date> {
     return String(this.getYear(date));
   }
 
-  getMonthYearName(date: Date, monthStyle: 'long' | 'short' | 'narrow'): string {
-    if (SUPPORTS_INTL_API) {
-      let dtf = new Intl.DateTimeFormat(this.locale, {month: monthStyle, year: 'numeric'});
-      return dtf.format(date);
-    }
-    let monthName = this.getMonthNames(monthStyle)[this.getMonth(date)];
-    return `${monthName} ${this.getYear(date)}`;
-  }
-
   getFirstDayOfWeek(): number {
     // We can't tell using native JS Date what the first day of the week is, we default to Sunday.
     return 0;
@@ -130,16 +121,16 @@ export class NativeDateAdapter extends DateAdapter<Date> {
     return new Date();
   }
 
-  parse(value: any, fmt?: Object): Date | null {
+  parse(value: any, parseFormat: Object): Date | null {
     // We have no way using the native JS Date to set the parse format or locale, so we ignore these
     // parameters.
     let timestamp = typeof value == 'number' ? value : Date.parse(value);
     return isNaN(timestamp) ? null : new Date(timestamp);
   }
 
-  format(date: Date, fmt?: Object): string {
+  format(date: Date, displayFormat: Object): string {
     if (SUPPORTS_INTL_API) {
-      let dtf = new Intl.DateTimeFormat(this.locale, fmt);
+      let dtf = new Intl.DateTimeFormat(this.locale, displayFormat);
       return dtf.format(date);
     }
     return date.toDateString();

src/lib/datepicker/calendar.ts

@@ -3,6 +3,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  Inject,
   Input,
   Optional,
   Output,
@@ -22,6 +23,7 @@ import {
 import {DateAdapter} from '../core/datetime/index';
 import {MdDatepickerIntl} from './datepicker-intl';
 import {MdDatepickerMissingDateImplError} from './datepicker-errors';
+import {MD_DATE_FORMATS, MdDateFormats} from './date-formats';
 
 
 /**
@@ -43,7 +45,9 @@ export class MdCalendar<D> implements AfterContentInit {
   /** A date representing the period (month or year) to start the calendar in. */
   @Input()
   get startAt(): D { return this._startAt; }
-  set startAt(value: D) { this._startAt = this._dateAdapter.parse(value); }
+  set startAt(value: D) {
+    this._startAt = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
+  }
   private _startAt: D;
 
   /** Whether the calendar should be started in month or year view. */
@@ -52,19 +56,25 @@ export class MdCalendar<D> implements AfterContentInit {
   /** The currently selected date. */
   @Input()
   get selected(): D { return this._selected; }
-  set selected(value: D) { this._selected = this._dateAdapter.parse(value); }
+  set selected(value: D) {
+    this._selected = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
+  }
   private _selected: D;
 
   /** The minimum selectable date. */
   @Input()
   get minDate(): D { return this._minDate; }
-  set minDate(date: D) { this._minDate = this._dateAdapter.parse(date); }
+  set minDate(date: D) {
+    this._minDate = this._dateAdapter.parse(date, this._dateFormats.parse.dateInput);
+  }
   private _minDate: D;
 
   /** The maximum selectable date. */
   @Input()
   get maxDate(): D { return this._maxDate; }
-  set maxDate(date: D) { this._maxDate = this._dateAdapter.parse(date); }
+  set maxDate(date: D) {
+    this._maxDate = this._dateAdapter.parse(date, this._dateFormats.parse.dateInput);
+  }
   private _maxDate: D;
 
   /** A function used to filter which dates are selectable. */
@@ -97,7 +107,8 @@ export class MdCalendar<D> implements AfterContentInit {
   /** The label for the current calendar view. */
   get _periodButtonText(): string {
     return this._monthView ?
-        this._dateAdapter.getMonthYearName(this._activeDate, 'short').toLocaleUpperCase() :
+        this._dateAdapter.format(this._activeDate, this._dateFormats.display.monthYearLabel)
+            .toLocaleUpperCase() :
         this._dateAdapter.getYearName(this._activeDate);
   }
 
@@ -115,9 +126,14 @@ export class MdCalendar<D> implements AfterContentInit {
     return this._monthView ? this._intl.nextMonthLabel : this._intl.nextYearLabel;
   }
 
-  constructor(private _intl: MdDatepickerIntl, @Optional() private _dateAdapter: DateAdapter<D>) {
+  constructor(private _intl: MdDatepickerIntl,
+              @Optional() private _dateAdapter: DateAdapter<D>,
+              @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats) {
     if (!this._dateAdapter) {
-      throw new MdDatepickerMissingDateImplError('DateAdapter', ['MdNativeDateModule']);
+      throw new MdDatepickerMissingDateImplError('DateAdapter');
+    }
+    if (!this._dateFormats) {
+      throw new MdDatepickerMissingDateImplError('MD_DATE_FORMATS');
     }
   }
 

src/lib/datepicker/datepicker-errors.ts

@@ -3,9 +3,9 @@ import {MdError} from '../core/errors/error';
 
 /** @docs-private */
 export class MdDatepickerMissingDateImplError extends MdError {
-  constructor(provider: string, suggestedModules: string[]) {
+  constructor(provider: string) {
     super(`MdDatepicker: No provider found for ${provider}. You must import one of the following` +
-          ` modules at your application root: ${suggestedModules.join(', ')}, or provide a custom` +
+          ` modules at your application root: MdNativeDateModule, or provide a custom` +
           ` implementation.`);
   }
 }

src/lib/datepicker/datepicker-input.ts

@@ -4,6 +4,7 @@ import {
   ElementRef,
   EventEmitter,
   forwardRef,
+  Inject,
   Input,
   OnDestroy,
   Optional,
@@ -16,6 +17,7 @@ import {MdInputContainer} from '../input/input-container';
 import {DOWN_ARROW} from '../core/keyboard/keycodes';
 import {DateAdapter} from '../core/datetime/index';
 import {MdDatepickerMissingDateImplError} from './datepicker-errors';
+import {MD_DATE_FORMATS, MdDateFormats} from './date-formats';
 
 
 export const MD_DATEPICKER_VALUE_ACCESSOR: any = {
@@ -57,13 +59,14 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   /** The value of the input. */
   @Input()
   get value(): D {
-    return this._dateAdapter.parse(this._elementRef.nativeElement.value);
+    return this._dateAdapter.parse(this._elementRef.nativeElement.value,
+        this._dateFormats.parse.dateInput);
   }
   set value(value: D) {
-    let date = this._dateAdapter.parse(value);
+    let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
     let oldDate = this.value;
     this._renderer.setElementProperty(this._elementRef.nativeElement, 'value',
-        date ? this._dateAdapter.format(date) : '');
+        date ? this._dateAdapter.format(date, this._dateFormats.display.dateInput) : '');
     if (!this._dateAdapter.sameDate(oldDate, date)) {
       this._valueChange.emit(date);
     }
@@ -72,13 +75,17 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   /** The minimum valid date. */
   @Input()
   get min(): D { return this._min; }
-  set min(value: D) { this._min = this._dateAdapter.parse(value); }
+  set min(value: D) {
+    this._min = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
+  }
   private _min: D;
 
   /** The maximum valid date. */
   @Input()
   get max(): D { return this._max; }
-  set max(value: D) { this._max = this._dateAdapter.parse(value); }
+  set max(value: D) {
+    this._max = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
+  }
   private _max: D;
 
   /** Emits when the value changes (either due to user input or programmatic change). */
@@ -94,9 +101,13 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
       private _elementRef: ElementRef,
       private _renderer: Renderer,
       @Optional() private _dateAdapter: DateAdapter<D>,
+      @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats,
       @Optional() private _mdInputContainer: MdInputContainer) {
     if (!this._dateAdapter) {
-      throw new MdDatepickerMissingDateImplError('DateAdapter', ['MdNativeDateModule']);
+      throw new MdDatepickerMissingDateImplError('DateAdapter');
+    }
+    if (!this._dateFormats) {
+      throw new MdDatepickerMissingDateImplError('MD_DATE_FORMATS');
     }
   }
 
@@ -152,7 +163,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   }
 
   _onInput(value: string) {
-    let date = this._dateAdapter.parse(value);
+    let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
     this._onChange(date);
     this._valueChange.emit(date);
   }

src/lib/datepicker/datepicker-intl.ts

@@ -27,10 +27,4 @@ export class MdDatepickerIntl {
 
   /** A label for the 'switch to year view' button (used by screen readers). */
   switchToYearViewLabel = 'Change to year view';
-
-  /**
-   * The format to use when displaying dates without time information. If unspecified the `date`
-   * format supplied by {@link DateAdapter#getDefaultFormats} will be used.
-   */
-  dateFormat: any;
 }

src/lib/datepicker/datepicker.ts

@@ -5,6 +5,7 @@ import {
   ComponentRef,
   ElementRef,
   EventEmitter,
+  Inject,
   Input,
   OnDestroy,
   Optional,
@@ -31,6 +32,7 @@ import {Subscription} from 'rxjs/Subscription';
 import {MdDialogConfig} from '../dialog/dialog-config';
 import {DateAdapter} from '../core/datetime/index';
 import {MdDatepickerMissingDateImplError} from './datepicker-errors';
+import {MD_DATE_FORMATS, MdDateFormats} from './date-formats';
 
 
 /** Used to generate a unique ID for each datepicker instance. */
@@ -84,7 +86,9 @@ export class MdDatepicker<D> implements OnDestroy {
     // selected value is.
     return this._startAt || (this._datepickerInput ? this._datepickerInput.value : null);
   }
-  set startAt(date: D) { this._startAt = this._dateAdapter.parse(date); }
+  set startAt(date: D) {
+    this._startAt = this._dateAdapter.parse(date, this._dateFormats.parse.dateInput);
+  }
   private _startAt: D;
 
   /**
@@ -137,9 +141,13 @@ export class MdDatepicker<D> implements OnDestroy {
   constructor(private _dialog: MdDialog, private _overlay: Overlay,
               private _viewContainerRef: ViewContainerRef,
               @Optional() private _dateAdapter: DateAdapter<D>,
+              @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats,
               @Optional() private _dir: Dir) {
     if (!this._dateAdapter) {
-      throw new MdDatepickerMissingDateImplError('DateAdapter', ['MdNativeDateModule']);
+      throw new MdDatepickerMissingDateImplError('DateAdapter');
+    }
+    if (!this._dateFormats) {
+      throw new MdDatepickerMissingDateImplError('MD_DATE_FORMATS');
     }
   }
 

src/lib/datepicker/index.ts

@@ -19,6 +19,7 @@ import {MD_DATE_FORMATS} from './date-formats';
 
 export * from './calendar';
 export * from './calendar-body';
+export * from './date-formats';
 export * from './datepicker';
 export * from './datepicker-input';
 export * from './datepicker-intl';