Angular.js <input type=“date”> modifier le format de la valeur soumise

Malheureusement, les navigateurs qui implémentent un élément spécifique de type pour la gestion des dates (comme Chrome) utiliser le système d'exploitation format de la date, et aucun que je suis conscient de vous permettre de changer le format (il n'est même pas dans la spec W3C). En outre, si le navigateur ne prend pas en charge (la plupart d'entre eux), il utilise régulièrement saisie de texte, mais accepte uniquement les données dans la norme ISO-8601, ce qui fait qu'empirer les choses.

Personnellement, j'évite de type="date" parce que comme c'est, c'est à peu près sans valeur, sauf si vous êtes sur un périphérique mobile compatible (iOS). Donc, si vous le pouvez, utilisez une entrée de texte, et si vous le souhaitez convertir la valeur de texte dans un objet date à attribuer à votre modèle, ainsi que de reformater après avoir été mis à jour, vous aurez besoin de trouver ou de rédiger une directive pour ce faire. Il est le INTERFACE utilisateur-Bootstrap sélecteur de date, mais il n'a pas reformater la date pour vous et vous apporte plus de choses que peut-être vous avez besoin. Il peut y en avoir d'autres, trop.

Cependant, dans l'esprit de répondre à votre question, j'ai mis en place une démo de la directive que les deux reformate la date écrite au format de votre choix (à l'aide Angulaire du $date filtre). Il va reformater sur la pâte, de flou ou de la modification, ou après une courte pause d'inactivité après la saisie d'une date (celle-ci peut ne pas fonctionner particulièrement bien dans le monde réel, mais il a l'air plutôt cool. le prendre si c'est bizarre). L'autre manque à gagner est-il utilise le navigateur par défaut du mécanisme pour l'analyse d'une Date. Si cela est insuffisant, le remplacer par quelque chose qui est. Je suis sûr que c'est loin d'être prêt pour la production, mais c'est un début. Si c'est utile, je vais le mettre dans un formel module sur Github.

angular.module("demo.directives", [])
.directive('date', ['$filter', '$timeout', function($filter, $timeout) {
return {
restrict: 'A',
require: '?^ngModel',
link: function($scope, $element, $attrs, ngModel) {
var format = $attrs.dateFormat || 'short', //default date format
validityName = 'date'; //change the name to whatever you want to use to check errors
//called by the directive to render the first time, and also on events when the value is changed 
var formatter = function() {
var date =  ngModel.$modelValue ? 
$filter('date')(ngModel.$modelValue, format) : 
ngModel.$viewValue;
$element.val(date);
};
//parse the value when it is being set from the view to the model
ngModel.$parsers.unshift(function(value) {
// you may wish to use a more advanced date parsing module for better results
var date = new Date(value);
if (isNaN(date)) { 
//invalid date, flag invalid and return undefined so we don't set the model value
ngModel.$setValidity(validityName, false);
return undefined;
}
//clear invalid flag
ngModel.$setValidity(validityName, true);
return date;
});
//used by ngModel to display to render the directive initially; we'll just reformat
ngModel.$render = formatter;
var handle;
//trigger the formatter on paste
$element.on('paste cut', function() {
if (handle) $timeout.cancel(handle);
handle = $timeout(formatter, 0); //needs to break out of the current context to work
})
//you can axe this whole event if you don't like the reformat after a pause
$element.on('keydown', function() {
if (handle) $timeout.cancel(handle);
handle = $timeout(formatter, 750);
})
//trigger the formatter on blur
$element.on('blur change', formatter);
}
};
}]);

Utilisation:

Inclure la la directive à partir de ce plunk dans le module, puis dans votre code HTML à utiliser

 <input type="text" date date-format="short" ng-model="myDateValue" />

OriginalL'auteur HackedByChinese

Utiliser le Filtre concept

angular.module('yourmodule').filter('date', function($filter)
{
return function(input)
{
if(input == null){ return ""; } 
var _date = $filter('date')(new Date(input), 'dd-MM-yyyy');
return _date.toUpperCase();
};
});
<span>{{ d.time | date }}</span>

ou dans le contrôleur

var filterdatetime = $filter('date')( $scope.date );

Date de filtrage et de mise en forme

OriginalL'auteur Prashobh