Changer le format du MD-datepicker dans le matériel angulaire

pour résoudre également le problème souligné par kazuar:

malheureusement, cela ne fonctionne pas si la date est tapée du clavier

vous devez également définir la méthode parseDate. Extrait du docs:

$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'L', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};

pour un exemple complet, j'ai dans mon application (using moment):

$mdDateLocaleProvider.formatDate = function(date) {
    return moment(date).format('DD/MM/YYYY');
};

$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD/MM/YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};

concerne

pour ceux qui n'utilisent pas le Moment.js, vous pouvez formater une chaîne de caractères:

.config(function($mdDateLocaleProvider) {
  $mdDateLocaleProvider.formatDate = function(date) {

    var day = date.getDate();
    var monthIndex = date.getMonth();
    var year = date.getFullYear();

    return day + '/' + (monthIndex + 1) + '/' + year;

  };
});

fonctionne parfaitement lorsque la date est tapée à partir du clavier et renvoie null au début pour éviter le massage "Date invalide" dans la directive md-datapicker:

$mdDateLocaleProvider.formatDate = function(date) {
  return date ? moment(date).format('DD/MM/YYYY') : null;
};

$mdDateLocaleProvider.parseDate = function(dateString) {
  var m = moment(dateString, 'DD/MM/YYYY', true);
  return m.isValid() ? m.toDate() : new Date(NaN);
};

changer le format de la date, les noms de mois et les noms de semaine pendant l'exécution est parfaitement possible avec AngularJS 1.5.9 et moment 2.17.1.

configurez D'abord le langage initial. (Dans cet exemple, la configuration de angular-translate/$translateProvider est optionnelle.)

angular.module('app').config(configureLocalization)

configureLocalization.$inject = ['$translateProvider', '$mdDateLocaleProvider', 'localdb', '__config'];
function configureLocalization($translateProvider, $mdDateLocaleProvider, localdb, __config) {
  // Configure angular-translate
  $translateProvider.useStaticFilesLoader({
      prefix: 'locale/',
      suffix: '.json'
  });
  // get the language from local storage using a helper 
  var language = localdb.get('language');
  if (!language || language === 'undefined') {
    localdb.set('language', (language = __config.app.defaultLanguage));
  }
  // Set the preferredLanguage in angular-translate
  $translateProvider.preferredLanguage(language);

  // Change moment's locale so the 'L'-format is adjusted.
  // For example the 'L'-format is DD.MM.YYYY for German
  moment.locale(language);

  // Set month and week names for the general $mdDateLocale service
  var localeData = moment.localeData();
  $mdDateLocaleProvider.months      = localeData._months;
  $mdDateLocaleProvider.shortMonths = moment.monthsShort();
  $mdDateLocaleProvider.days        = localeData._weekdays;
  $mdDateLocaleProvider.shortDays   = localeData._weekdaysMin;
  // Optionaly let the week start on the day as defined by moment's locale data
  $mdDateLocaleProvider.firstDayOfWeek = localeData._week.dow;

  // Format and parse dates based on moment's 'L'-format
  // 'L'-format may later be changed
  $mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'L', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
  };

  $mdDateLocaleProvider.formatDate = function(date) {
    var m = moment(date);
    return m.isValid() ? m.format('L') : '';
  };
}

plus tard, vous pouvez avoir un contrôleur de base qui regarde une variable de langue qui est changée lorsque l'utilisateur sélectionne une autre langue.

angular.module('app').controller('BaseCtrl', Base);

Base.$inject = ['$scope', '$translate', 'localdb', '$mdDateLocale'];
function Base($scope, $translate, localdb, $mdDateLocale) {

  var vm = this;
  vm.language = $translate.use();

  $scope.$watch('BaseCtrl.language', function(newValue, oldValue) {
    // Set the new language in local storage
    localdb.set('language', newValue);
    $translate.use(newValue);

    // Change moment's locale so the 'L'-format is adjusted.
    // For example the 'L'-format is DD-MM-YYYY for Dutch
    moment.locale(newValue);

    // Set month and week names for the general $mdDateLocale service
    var localeDate = moment.localeData();
    $mdDateLocale.months      = localeDate._months;
    $mdDateLocale.shortMonths = moment.monthsShort();
    $mdDateLocale.days        = localeDate._weekdays;
    $mdDateLocale.shortDays   = localeDate._weekdaysMin;
    // Optionaly let the week start on the day as defined by moment's locale data
    $mdDateLocale.firstDayOfWeek = localeData._week.dow;
  });
}

remarquez que nous n'avons pas besoin de changer les méthodes $mdDateLocale.formatDate et $mdDateLocale.parseDate car elles sont déjà configurées pour utiliser le format" L "qui est modifié en appelant moment.locale(newValue) .

voir la documentation pour $mdDateLocaleProvider pour plus de personnalisation locale: https://material.angularjs.org/latest/api/service / $mdDateLocaleProvider

Bonus: voici à quoi ressemble le sélecteur de langue:

<md-select ng-model="BaseCtrl.language" class="md-no-underline">
  <md-option
    ng-repeat="language in ['en', 'de', 'fr', 'nl']"
    ng-value ="language"
  ><span
    class    ="flag-icon flag-icon-{{language ==='en' ? 'gb' : language}}"
  ></span>
  </md-option>
</md-select>

-- lorsque nous utilisons md-DatePicker dans md-dialog, alors $mdDateLocaleProvider service ne formate pas la date comme nous en avons besoin. Nous devons utiliser $mdDateLocale dans le controller de md-dialog pour formater la date du MD-DatePicker. par exemple -

angular.module('MyApp').controller('AppCtrl', function($scope, $mdDateLocale) {

  $mdDateLocale.formatDate = function(date) {
    return moment(date).format('YYYY-MM-DD');
  };

  $scope.myDate = new Date('2015-10-15');

  $scope.minDate = new Date();

  $scope.maxDate = new Date();
});

en utilisant $filter au lieu de moment.js et en référence aux réponses de @Ian Poston Framer et @java dev pour moi, ce qui suit a finalement fonctionné pour moi:

angular
    .module('App', ['ngMaterial'])
    .run(function($mdDateLocale, $filter) {
        $mdDateLocale.formatDate = function(date) {
            return $filter('date')(date, "dd-MM-yyyy");
        };
    })

Je ne pouvais pas injecter $filter dans .config parce que ce n'est pas un fournisseur, donc j'ai dû le faire à l'intérieur de .run avec $mdDateLocale .

je voudrais fournir ma solution qui est 100% basé sur poste de Christiaan Westerbeek . J'aime vraiment ce qu'il a fait, mais personnellement, je voulais quelque chose d'un peu plus simpliste.

appConfig.js

// config params in global scope that need to be set outside of Angular (due to Angular limitiations)
var appConfig = {
    // enables the dynamic setting of md-datepicker display masks (eg. when user changes language from English to Spanish)
    date: {
        // default mask
        format: "MM/dd/yyyy",

        // md-datepicker display format
        mdFormatDate: function (date) {
            if (date && date instanceof Date) {
                return date.format(appConfig.date.format);

            } else {
                return null;

            }

        }

    }

};

app.matériel.config.js

// set angular material config
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
    // this is a global object set inside appConfig.js
    $mdDateLocaleProvider.formatDate = appConfig.date.mdFormatDate;

}]);

certains fichier de service qui traite de la localisation/traductions/etc

// inside the service where you'd track the language/locale change
service._updateConfigDateFormat = function (theNewDateFormat) {
    // where theNewDateFormat is something like 'yyyy/MM/dd' or whatever
    daepConfig.date.format = theNewDateFormat;

};

il est à noter que cette solution va et non re-formater en direct les valeurs d'affichage de votre MD-datepicker. Il ne fonctionnera que lorsque le modèle change de valeurs.

j'ai eu le même problème et j'ai trouvé cette solution simple avec l'aide de moment.js . J'ai utilisé l'attribut ng-change qui s'allume lorsque la date est changée.

dans votre HTML:

<md-datepicker ng-model="myDate" ng-change="dateChanged()"></md-datepicker>

à l'intérieur de votre contrôleur:

$scope.dateChanged = function() {
    this.myDate = moment(this.myDate).format('YYYY/MM/DD');
}

pour angular-material >= 5.x.x

la méthode recommandée pour utiliser d'autres formats de date personnalisés/prédéfinis est décrite dans la documentation sur les matériaux angulaires:

https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings

exemple d'implémentation utilisant MomentJS pour personnaliser et analyser le datetime afficher formats :

...
import { MomentModule } from 'angular2-moment';

import { MatMomentDateModule, MomentDateAdapter, MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

...

// moment formats explanation: https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
    parse: {
      dateInput: 'YYYY-MM-DD',
    },
    display: {
      dateInput: 'YYYY-MM-DD',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'YYYY-MM-DD',
      monthYearA11yLabel: 'MMMM YYYY',
    },
  };

  ...

@Component({
    ...
    providers: [
        // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
        // `MatMomentDateModule` in your applications root module. We provide it at the component level
        // here, due to limitations of our example generation script.
        {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
        // {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
        {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}
    ]
})

...

selon votre implémentation, à l'intérieur du composant vous pourriez aussi avoir besoin d'utiliser:

date = new FormControl(moment());

vous devez également installer bibliothèque de moments et adaptateur pour angulaire:

https://www.npmjs.com/package/angular2-moment

npm install --enregistrer angular2-moment

https://www.npmjs.com/package/@angular/material-moment-adapter

npm install --save @angulaire/matériel-moment-adaptateur

si vous utilisez la dernière version d'angular-material.js utilise alors le service $mdDateLocale. Cet échantillon de code utilise le filtre de date intégré d'angular comme une alternative à l'utilisation du moment.bibliothèque js. Voir d'autres options de format de date en utilisant le service $filter d'angular ici à ce lien https://docs.angularjs.org/api/ng/filter/date .

// mainController.js
angular.module('app').config(function($mdDateLocale, $filter, $scope) {

  // FORMAT THE DATE FOR THE DATEPICKER
  $mdDateLocale.formatDate = function(date) {
        return $filter('date')($scope.myDate, "mediumDate");
  };

});

j'ai utilisé $mdDateLocaleProvider pour le formater sur l'extrémité de la fronde. Si vous voulez formater la date tout en l'envoyant à l'arrière, ce qui suit a fonctionné pour moi: -

$filter('date')(this.date, 'MM/dd/yyyy');

j'ai ci-dessus dans le contrôleur.