Alterar formato de md-datepicker em material angular

Material angular introduziu um novo componente selecionador de data encontrado aqui .

Eu quero que a data retornada por este componente esteja no formato aaa-mm-dd, mas não tenho certeza de como isso é feito. Ao pesquisar, descobri que $mdDateLocaleProvider pode ser usado, mas não consegui encontrar um exemplo de uso.

Alguém pode me mostrar um exemplo prático de formatação da data retornada pelo md-datepicker ?

Existe uma documentação para $mdDateLocaleProvider nos documentos do Angular Material.

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

Se você não usar o moment.js, substitua o código dentro de formatDate pelo que você deseja usar para formatar a data.

Aqui está um exemplo de CodePen baseado nas amostras de documentos do Angular Material.

Para também abordar o problema apontado por kazuar:

Infelizmente não funciona se a data for digitada no teclado

você deve definir o método parseDate também. Dos docs:

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

Para um exemplo completo, eu tenho no meu aplicativo (usando momento):

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

Saudações

Para aqueles que não usam Moment.js, você pode formatar como uma string:

 .config(function($mdDateLocaleProvider) { $mdDateLocaleProvider.formatDate = function(date) { var day = date.getDate(); var monthIndex = date.getMonth(); var year = date.getFullYear(); return day + '/' + (monthIndex + 1) + '/' + year; }; }); 

Funcionou perfeitamente quando a data foi digitada no keyborard e retornou null no início para evitar a massagem ‘Invalid date’ na diretiva 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); }; 

Alterar o formato de data, os nomes dos meses e os nomes das semanas durante o tempo de execução é perfeitamente possível com o AngularJS 1.5.9 e com o momento 2.17.1.

Primeiro configure o idioma inicial. (Neste exemplo, a configuração de translate.google-translate / $ translate.ru é opcional.)

 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') : ''; }; } 

Posteriormente, você pode ter algum controlador de base que observe uma variável de idioma que é alterada quando o usuário seleciona outro idioma.

 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; }); } 

Observe como não precisamos alterar os $mdDateLocale.formatDate e $mdDateLocale.parseDate , pois eles já estão configurados para usar o formato ‘L’que é alterado chamando moment.locale(newValue) .

Veja a documentação de $ mdDateLocaleProvider para mais customização de local: https://material.angularjs.org/latest/api/service/ $ mdDateLocaleProvider

Bônus: é assim que o seletor de idiomas se parece:

     

– Quando usamos o md-DatePicker no md-dialog, o serviço $ mdDateLocaleProvider não formata a data conforme necessário. Nós temos que usar $ mdDateLocale no controller do md-dialog para formatar a data do md-DatePicker. por exemplo –

 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(); }); 

Usando $filter vez de moment.js e em referência a respostas de @Ian Poston Framer e @java dev para mim o seguinte finalmente funcionou para mim:

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

Eu não pude injetar o $filter no .config porque ele não é um provedor, então eu tive que fazê-lo dentro do .run com o $mdDateLocale .

Eu gostaria de fornecer minha solução 100% baseada no post de Christiaan Westerbeek . Eu realmente gosto do que ele fez, mas eu pessoalmente queria algo um pouco mais simplista.

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; }]); 

algum arquivo de serviço que lida com localização / traduções / 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; }; 

Deve-se notar que esta solução não vai viver re-formatar os valores de exibição do seu md-datepicker. Só funcionará quando o modelo mudar valores.

Eu tive o mesmo problema e criei esta solução simples com a ajuda do moment.js . Eu usei o atributo ng-change que é acionado quando a data é alterada.

Dentro do seu HTML:

  

Dentro de seu controlador:

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

Se você estiver usando a versão mais recente do angular-material.js, use o serviço $ mdDateLocale. Essa amostra de código usa o filtro de data interno do angular como uma alternativa ao uso da biblioteca moment.js. Veja outras opções de formato de data usando o serviço $ filter do angular aqui neste link 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"); }; }); 

Eu usei $mdDateLocaleProvider para formatá-lo no final da folha. Se você quiser formatar a data enquanto envia para o back-end, o seguinte funcionou para mim:

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

Eu tenho o acima no controlador.

Para angular-material > = 5.xx

A maneira recomendada de usar outros formatos de data personalizados / predefinidos é descrita na documentação do material angular:

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

Um exemplo de implementação usando MomentJS para customizar e analisar formatos de exibição de data e hora:

 ... 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} ] }) ... 

Dependendo da sua implementação, dentro do componente, você também pode precisar usar:

date = new FormControl(moment());

Você também deve instalar a biblioteca e o adaptador Moment para o Angular:

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

npm install –save angular2-moment

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

npm install –save @ angular / material-momento-adaptador

    Intereting Posts