Como formatar uma data usando ng-model?

Eu tenho uma input definida como

 

Que é montado para ser exibido em outro lugar na página:

  Birth Date {{client.birthDate|date:'mediumDate'}}  

Quando a página carrega a data de nascimento é bem formatada como algo como Dec 22, 2009 . No entanto, quando eu olho dentro do meu é mostrado como Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time) que eu acho é como o JS processa objects Date como seqüências de caracteres.

Em primeiro lugar, como eu digo ao Angular para mostrar a data no como algo como 12/22/2009 ? Não consigo aplicar |filters dentro do atributo ng-model .

Em segundo lugar, assim que eu edito a data, mesmo mantendo-a em seu formato original, meu outro texto (dentro do

) não parece mais aplicar o filtro |date ; De repente, os formatos são alterados para corresponder à checkbox de texto de input. Como faço para aplicar o filtro de |date toda vez que o modelo muda?


Perguntas relacionadas:

  • Como faço para que minha diretiva seja acionada somente no onchange?
  • Como acessar argumentos em uma diretiva?

Use a validação personalizada de formulários http://docs.angularjs.org/guide/forms Demo: http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview

Diretiva usando formatadores e analisadores e MomentJS )

 angModule.directive('moDateInput', function ($window) { return { require:'^ngModel', restrict:'A', link:function (scope, elm, attrs, ctrl) { var moment = $window.moment; var dateFormat = attrs.moDateInput; attrs.$observe('moDateInput', function (newValue) { if (dateFormat == newValue || !ctrl.$modelValue) return; dateFormat = newValue; ctrl.$modelValue = new Date(ctrl.$setViewValue); }); ctrl.$formatters.unshift(function (modelValue) { if (!dateFormat || !modelValue) return ""; var retVal = moment(modelValue).format(dateFormat); return retVal; }); ctrl.$parsers.unshift(function (viewValue) { var date = moment(viewValue, dateFormat); return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : ""; }); } }; }); 

Aqui é muito útil directiva angular-datetime . Você pode usá-lo assim:

  

Ele também adiciona máscara à sua input e executa a validação.

Eu criei uma diretiva simples para permitir que os elementos de formulário de input[type="date"] padrão input[type="date"] funcionem corretamente com o AngularJS ~ 1.2.16.

Veja aqui: https://github.com/betsol/angular-input-date

E aqui está a demo: http://jsfiddle.net/F2LcY/1/

Estou usando o jquery datepicker para selecionar a data. Minha diretiva ler data e convertê-lo para o formato de data json (em milissegundos) armazenar em ng-model data enquanto exibir formatado date.and inverter se ng-model tiver data json (em milissegundos) meu formatador exibir no meu formato como jquery datepicker.

Código HTML:

  

Directiva Angular:

 myModule.directive('jqdatepicker', function ($filter) { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModelCtrl) { element.datepicker({ dateFormat: 'dd/mm/yy', onSelect: function (date) { var ar=date.split("/"); date=new Date(ar[2]+"-"+ar[1]+"-"+ar[0]); ngModelCtrl.$setViewValue(date.getTime()); scope.$apply(); } }); ngModelCtrl.$formatters.unshift(function(v) { return $filter('date')(v,'dd/MM/yyyy'); }); } }; }); 

Desde que você usou datepicker como uma class, estou assumindo que você está usando um datepicker Jquery ou algo semelhante.

Existe uma maneira de fazer o que você está pretendendo sem usar moment.js, usando apenas diretivas datepicker e angularjs.

Eu dei um exemplo aqui neste violino

Trechos do violino aqui:

  1. Datepicker tem um formato diferente e o formato angularjs é diferente, precisa encontrar a correspondência apropriada para que a data seja pré-selecionada no controle e também seja preenchida no campo de input enquanto o modelo ng estiver ligado. O formato abaixo é equivalente ao formato 'mediumDate' do AngularJS.

     $(element).find(".datepicker") .datepicker({ dateFormat: 'M d, yy' }); 
  2. A diretiva de input de data precisa ter uma variável de cadeia temporária para representar a forma de data legível por humanos.

  3. A atualização de diferentes seções da página deve acontecer por meio de events, como $broadcast e $on .

  4. Usar o filtro para representar a data em formato legível é também possível no modelo ng, mas com uma variável de modelo temporária.

     $scope.dateValString = $filter('date')($scope.dateVal, 'mediumDate'); 

Eu uso a seguinte diretiva que faz de mim e da maioria dos usuários muito felizes! Usa momento para análise e formatação. Parece um pouco como o de SunnyShah, mencionado anteriormente.

 angular.module('app.directives') .directive('appDatetime', function ($window) { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModel) { var moment = $window.moment; ngModel.$formatters.push(formatter); ngModel.$parsers.push(parser); element.on('change', function (e) { var element = e.target; element.value = formatter(ngModel.$modelValue); }); function parser(value) { var m = moment(value); var valid = m.isValid(); ngModel.$setValidity('datetime', valid); if (valid) return m.valueOf(); else return value; } function formatter(value) { var m = moment(value); var valid = m.isValid(); if (valid) return m.format("LLLL"); else return value; } } //link }; }); //appDatetime 

Na minha forma eu uso assim:

   

Isto irá ligar um timestamp (milissegundos desde 1970) para doc.begin e doc.end .

Eu prefiro que o servidor retorne a data sem modificação, e que o javascript faça a visualização massaging. Minha API retorna “MM / DD / AAAA hh: mm: ss” do SQL Server.

Recurso

 angular.module('myApp').factory('myResource', function($resource) { return $resource('api/myRestEndpoint/', null, { 'GET': { method: 'GET' }, 'QUERY': { method: 'GET', isArray: true }, 'POST': { method: 'POST' }, 'PUT': { method: 'PUT' }, 'DELETE': { method: 'DELETE' } }); } ); 

Controlador

 var getHttpJson = function () { return myResource.GET().$promise.then( function (response) { if (response.myDateExample) { response.myDateExample = $filter('date')(new Date(response.myDateExample), 'M/d/yyyy'); }; $scope.myModel= response; }, function (response) { console.log(response.data); } ); }; 

Diretiva de Validação myDate

 angular.module('myApp').directive('myDate', function($window) { return { require: 'ngModel', link: function(scope, element, attrs, ngModel) { var moment = $window.moment; var acceptableFormats = ['M/D/YYYY', 'MD-YYYY']; function isDate(value) { var m = moment(value, acceptableFormats, true); var isValid = m.isValid(); //console.log(value); //console.log(isValid); return isValid; }; ngModel.$parsers.push(function(value) { if (!value || value.length === 0) { return value; }; if (isDate(value)) { ngModel.$setValidity('myDate', true); } else { ngModel.$setValidity('myDate', false); } return value; }); } } } ); 

HTML

 

template / validation / messages.html

 
Required Field
Must be a number
Must be a valid email address
The data entered is too short
The data entered is too long
Must be a valid date

Em Angular2 + para qualquer pessoa interessada:

  

com tipo de filtros em DatePipe Angular.

Angularjs ui bootstrap você pode usar bootstrap angularjs ui, ele fornece validação de data também

  

no controlador pode especificar qualquer formato que você deseja exibir a data como filtro de data

$ scope.formats = [‘dd-MMMM-aaaa’, ‘aaaa / MM / dd’, ‘dd.MM.aaaa’, ‘curtaData’];