web-dev-qa-db-fra.com

Changer le format de md-datepicker dans Angular Material avec momentjs

Le matériau angulaire a introduit un nouveau composant du sélecteur de date trouvé ici .

Je souhaite que la date renvoyée par ce composant soit au format aaa-mm-jj mais je ne suis pas sûr de savoir comment cela est fait. En cherchant, j'ai trouvé que $mdDateLocaleProvider peut être utilisé, mais je n'ai pas trouvé d'exemple d'utilisation.

Quelqu'un peut-il me montrer un exemple concret de formatage de la date renvoyée par md-datepicker?

javascriptangularjslocalizationangular-materialmomentjs
56
dearn44

Il existe une documentation pour $mdDateLocaleProvider dans la documentation Matériau angulaire.

angular.module('app').config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
       return moment(date).format('YYYY-MM-DD');
    };
});

Si vous n'utilisez pas moment.js, remplacez le code que vous souhaitez utiliser par formatDate pour formater la date.

Ici est un exemple CodePen basé sur les exemples des documents Angular Material.

92
Bohuslav Burghardt

Pour aborder également le problème signalé par kazuar:

Malheureusement, cela ne fonctionne pas si la date est saisie au clavier

vous devez également définir la méthode parseDate. De la 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 (en utilisant 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);
};

Cordialement

55
shulito

Pour ceux qui n'utilisent pas Moment.js, vous pouvez formater en tant que chaîne:

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

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

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

  };
});
20
Ben Taliadoros

Fonctionne parfaitement lorsque la date est saisie au clavier et renvoyée à zéro en début d’initiation pour éviter le massage "Date non valide" dans la directive md-datepicker:

$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);
};
7
Janderson Silva

Changer le format de date, les noms de mois et les noms de semaines en cours d’exécution est parfaitement possible avec AngularJS 1.5.9 et moment 2.17.1.

Commencez par configurer la langue initiale. (Dans cet exemple, la configuration de angular-translate/$ translateProvider est facultative.)

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 surveille une variable de langue qui est modifié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;
  });
}

Notez 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).

Consultez la documentation de $ mdDateLocaleProvider pour plus de personnalisation des paramètres régionaux: https://material.angularjs.org/latest/api/service/ $ mdDateLocaleProvider

Bonus: le sélecteur de langue peut ressembler à ceci:

<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>
5
Christiaan Westerbeek

- Lorsque nous utilisons md-DatePicker dans md-dialog, le service $ mdDateLocaleProvider ne formate pas la date comme nous en avons besoin. Nous devons utiliser $ mdDateLocale dans le contrôleur de md-dialog pour formater la date de 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();
});
4
Ravindra Vairagi

En utilisant $filter au lieu de moment.js et en référence aux réponses de @Ian Poston Framer et @Java dev, voici ce qui a 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 car ce n'est pas un fournisseur, je devais donc le faire dans .run avec $mdDateLocale.

3
marcinowski

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 se déclenche lorsque la date est modifiée.

Dans votre code HTML:

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

Dans votre contrôleur:

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

J'aimerais proposer une solution basée à 100% sur le message 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.material.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;

}]);

un fichier de service traitant 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 pas vivre reformater les valeurs d'affichage de votre md-datepicker. Cela ne fonctionnera que lorsque le modèle changera de valeur.

1
jc_

Si vous utilisez la dernière version de angular-material.js, utilisez le service $ mdDateLocale. Cet exemple de code utilise le filtre de date intégré d'angular comme alternative à la bibliothèque moment.js. Voir les autres options de format de date utilisant le service $ filter d'angular ici sur 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");
  };

});
0
Ian Poston Framer

dans mon cas, je perdais le PlaceHolder, tout fonctionnait, mais le placeHolder disparaissait lorsque j'utilisais un formatage personnalisé. Les lignes ci-dessous ont résolu mon problème avec un espace réservé.

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

J'ai utilisé $mdDateLocaleProvider pour le formater à l'extrémité fronde. Si vous souhaitez formater la date lors de son envoi au serveur, les opérations suivantes ont fonctionné pour moi:

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

J'ai ce qui précède dans le contrôleur.

0
java dev