feat(datepicker): allow the date locale to be overwritten on a per element basis (#9749)

Adds the `md-date-locale` attribute which can be used to overwrite the locale formatting on a per-element basis.
This wasn't possible before, because the locale was global and it was being applied during the `config` phase.
These changes relate to PR #9736, because the specific datepicker modes might require special formatting (e.g. only showing the MM/YY on a credit card form).

Fixes #9270.

Author: crisbeto

src/components/datepicker/js/datepickerDirective.js

@@ -24,6 +24,8 @@
    * @param {expression=} ng-change Expression evaluated when the model value changes.
    * @param {expression=} ng-focus Expression evaluated when the input is focused or the calendar is opened.
    * @param {expression=} ng-blur Expression evaluated when focus is removed from the input or the calendar is closed.
+   * @param {boolean=} ng-disabled Whether the datepicker is disabled.
+   * @param {boolean=} ng-required Whether a value is required for the datepicker.
    * @param {Date=} md-min-date Expression representing a min date (inclusive).
    * @param {Date=} md-max-date Expression representing a max date (inclusive).
    * @param {(function(Date): boolean)=} md-date-filter Function expecting a date and returning a boolean whether it can be selected or not.
@@ -36,8 +38,9 @@
    * * `"all"` - Hides all icons.
    * * `"calendar"` - Only hides the calendar icon.
    * * `"triangle"` - Only hides the triangle icon.
-   * @param {boolean=} ng-disabled Whether the datepicker is disabled.
-   * @param {boolean=} ng-required Whether a value is required for the datepicker.
+   * @param {Object=} md-date-locale Allows for the values from the `$mdDateLocaleProvider` to be
+   * ovewritten on a per-element basis (e.g. `msgOpenCalendar` can be overwritten with
+   * `md-date-locale="{ msgOpenCalendar: 'Open a special calendar' }"`).
    *
    * @description
    * `<md-datepicker>` is a component used to select a single date.
@@ -79,7 +82,7 @@
           '<md-button type="button" md-no-ink ' +
               'class="md-datepicker-triangle-button md-icon-button" ' +
               'ng-click="ctrl.openCalendarPane($event)" ' +
-              'aria-label="{{::ctrl.dateLocale.msgOpenCalendar}}">' +
+              'aria-label="{{::ctrl.locale.msgOpenCalendar}}">' +
             '<div class="md-datepicker-expand-triangle"></div>' +
           '</md-button>';
 
@@ -102,7 +105,7 @@
             '<div class="md-datepicker-input-mask-opaque"></div>' +
           '</div>' +
           '<div class="md-datepicker-calendar">' +
-            '<md-calendar role="dialog" aria-label="{{::ctrl.dateLocale.msgCalendar}}" ' +
+            '<md-calendar role="dialog" aria-label="{{::ctrl.locale.msgCalendar}}" ' +
                 'md-current-view="{{::ctrl.currentView}}"' +
                 'md-min-date="ctrl.minDate"' +
                 'md-max-date="ctrl.maxDate"' +
@@ -120,7 +123,8 @@
         currentView: '@mdCurrentView',
         dateFilter: '=mdDateFilter',
         isOpen: '=?mdIsOpen',
-        debounceInterval: '=mdDebounceInterval'
+        debounceInterval: '=mdDebounceInterval',
+        dateLocale: '=mdDateLocale'
       },
       controller: DatePickerCtrl,
       controllerAs: 'ctrl',
@@ -232,9 +236,6 @@
     /** @final */
     this.$window = $window;
 
-    /** @final */
-    this.dateLocale = $mdDateLocale;
-
     /** @final */
     this.dateUtil = $$mdDateUtil;
 
@@ -247,6 +248,13 @@
     /** @final */
     this.$$rAF = $$rAF;
 
+    /**
+     * Holds locale-specific formatters, parsers, labels etc. Allows
+     * the user to override specific ones from the $mdDateLocale provider.
+     * @type {!Object}
+     */
+    this.locale = this.dateLocale ? angular.extend({}, $mdDateLocale, this.dateLocale) : $mdDateLocale;
+
     /**
      * The root document element. This is used for attaching a top-level click handler to
      * close the calendar panel when a click outside said panel occurs. We use `documentElement`
@@ -585,14 +593,14 @@
    */
   DatePickerCtrl.prototype.handleInputEvent = function() {
     var inputString = this.inputElement.value;
-    var parsedDate = inputString ? this.dateLocale.parseDate(inputString) : null;
+    var parsedDate = inputString ? this.locale.parseDate(inputString) : null;
     this.dateUtil.setDateTimeToMidnight(parsedDate);
 
     // An input string is valid if it is either empty (representing no date)
     // or if it parses to a valid date that the user is allowed to select.
     var isValidInput = inputString == '' || (
       this.dateUtil.isValidDate(parsedDate) &&
-      this.dateLocale.isDateComplete(inputString) &&
+      this.locale.isDateComplete(inputString) &&
       this.isDateEnabled(parsedDate)
     );
 
@@ -869,7 +877,7 @@
     var timezone = this.$mdUtil.getModelOption(this.ngModelCtrl, 'timezone');
 
     this.date = value;
-    this.inputElement.value = this.dateLocale.formatDate(value, timezone);
+    this.inputElement.value = this.locale.formatDate(value, timezone);
     this.mdInputContainer && this.mdInputContainer.setHasValue(!!value);
     this.closeCalendarPane();
     this.resizeInputElement();

src/components/datepicker/js/datepickerDirective.spec.js

@@ -129,12 +129,31 @@ describe('md-datepicker', function() {
   });
 
   it('should pass the timezone to the formatting function', function() {
-    spyOn(dateLocale, 'formatDate');
+    spyOn(controller.locale, 'formatDate');
 
     createDatepickerInstance('<md-datepicker ng-model="myDate" ' +
       'ng-model-options="{ timezone: \'utc\' }"></md-datepicker>');
 
-    expect(dateLocale.formatDate).toHaveBeenCalledWith(pageScope.myDate, 'utc');
+    expect(controller.locale.formatDate).toHaveBeenCalledWith(pageScope.myDate, 'utc');
+  });
+
+  it('should allow for the locale to be overwritten on a specific element', function() {
+    pageScope.myDate = new Date(2015, SEP, 1);
+
+    pageScope.customLocale = {
+      formatDate: function() {
+        return 'September First';
+      }
+    };
+
+    spyOn(pageScope.customLocale, 'formatDate').and.callThrough();
+
+    createDatepickerInstance(
+      '<md-datepicker ng-model="myDate" md-date-locale="customLocale"></md-datepicker>'
+    );
+
+    expect(pageScope.customLocale.formatDate).toHaveBeenCalled();
+    expect(ngElement.find('input').val()).toBe('September First');
   });
 
   describe('ngMessages support', function() {