options.displayFormat is overridden, thus not applying

[ghost]

When calling the mdPicker service, you can give it a displayFormat parameter which allows the date on the side of the calendar to be changed.

But no matter the value, it's overridden by a constant in the code, in the DatePicker file at line 119 :

this.$get = ["$mdDialog", function($mdDialog) {
       var datePicker = function(currentDate, options) {
           if (!angular.isDate(currentDate)) currentDate = Date.now();
           if (!angular.isObject(options)) options = {};

            // -------------------- RIGHT HERE --------------------------------
           options.displayFormat = DISPLAY_FORMAT;    

           return $mdDialog.show({
               controller:  ['$scope', '$mdDialog', '$mdMedia', '$timeout', 'currentDate', 'options', DatePickerCtrl],
               controllerAs: 'datepicker',
               clickOutsideToClose: true,
               template: '<md-dialog aria-label="" class="mdp-datepicker" ng-class="{ \'portrait\': !$mdMedia(\'gt-xs\') }">' +
                           '<md-dialog-content layout="row" layout-wrap>' +
                               '<div layout="column" layout-align="start center">' +
                                   '<md-toolbar layout-align="start start" flex class="mdp-datepicker-date-wrapper md-hue-1 md-primary" layout="column">' +
                                       '<span class="mdp-datepicker-year" ng-click="datepicker.showYear()" ng-class="{ \'active\': datepicker.selectingYear }">{{ datepicker.date.format(\'YYYY\') }}</span>' +
                                       '<span class="mdp-datepicker-date" ng-click="datepicker.showCalendar()" ng-class="{ \'active\': !datepicker.selectingYear }">{{ datepicker.date.format(datepicker.displayFormat) }}</span> ' +
                                   '</md-toolbar>' +
                               '</div>' +
                               '<div>' +
                                   '<div class="mdp-datepicker-select-year mdp-animation-zoom" layout="column" layout-align="center start" ng-if="datepicker.selectingYear">' +
                                       '<md-virtual-repeat-container md-auto-shrink md-top-index="datepicker.yearTopIndex">' +
                                           '<div flex md-virtual-repeat="item in datepicker.yearItems" md-on-demand class="repeated-year">' +
                                               '<span class="md-button" ng-click="datepicker.selectYear(item)" md-ink-ripple ng-class="{ \'md-primary current\': item == year }">{{ item }}</span>' +
                                           '</div>' +
                                       '</md-virtual-repeat-container>' +
                                   '</div>' +
                                   '<mdp-calendar ng-if="!datepicker.selectingYear" class="mdp-animation-zoom" date="datepicker.date" min-date="datepicker.minDate" date-filter="datepicker.dateFilter" max-date="datepicker.maxDate"></mdp-calendar>' +
                                   '<md-dialog-actions layout="row">' +
                                       '<span flex></span>' +
                                       '<md-button ng-click="datepicker.cancel()" aria-label="' + LABEL_CANCEL + '">' + LABEL_CANCEL + '</md-button>' +
                                       '<md-button ng-click="datepicker.confirm()" class="md-primary" aria-label="' + LABEL_OK + '">' + LABEL_OK + '</md-button>' +
                                   '</md-dialog-actions>' +
                               '</div>' +
                           '</md-dialog-content>' +
                       '</md-dialog>',
               targetEvent: options.targetEvent,
               locals: {
                   currentDate: currentDate,
                   options: options
               },
               skipHide: true
           });
       };

       return datePicker;
   }];

A function setDisplayFormat exists but is never called though.

[ghost]

I'm sorry I just discovered I do could attach files. Here is the code :

[BkSouX]

Hi @trichetriche , you have to configure the provider in the config phase like this

.config(($mdpDatePickerProvider) => { 'ngInject'; $mdpDatePickerProvider.setDisplayFormat('DD/MM/YYYY'); })

(im using es6)

[ghost]

Hi @BkSouX , I have already done that. It is not working because of that line that overrides whatever format I give. As I said, a setDisplayFormat method is available but never called. Thus, the DISPLAY_FORMAT constant is always the same value, and so overrides the format you give as parameter.