Angular.js <input type="date"> ändern Sie das format der übermittelten Wert

Leider, Browser, Umsetzung eines bestimmten element-Typ für die Behandlung von Datumsangaben (wie Chrome) verwenden der OS-Datum-format und keine, die ich bewusst bin, lassen Sie das format geändert haben (es ist auch nicht in der W3C-spec). Darüber hinaus wird, wenn der browser nicht unterstützt wird (die meisten), es verwendet einen normalen text-input, sondern akzeptiert nur Daten in ISO-8601-format, das macht die Sache noch schlimmer.

Ich persönlich vermeiden type="date" weil, wie es ist, es ist ziemlich wertlos, es sei denn, du bist auf einem mobilen Gerät, das es unterstützt (wie iOS). Also, wenn Sie können, verwenden Sie einen text-input, und wenn Sie wollen, es zu konvertieren, den text-Wert in ein date-Objekt, weisen Sie das Modell, neu formatieren es nach aktualisiert wird, müssen Sie zu finden und schreiben Sie eine Richtlinie, um dies zu tun. Es ist die UI-Bootstrap-Datum-picker, aber es funktioniert nicht formatieren Sie das Datum, für Sie und bringt mehr Zeug als Sie vielleicht brauchen. Möglicherweise gibt es andere, auch.

Aber im Geiste der Beantwortung Ihrer Frage, ich habe einen demo-Richtlinie, die beide formatiert das eingegebene Datum im format Ihrer Wahl (mit Angular ist $date - filter). Es werde neu formatieren auf einfügen, Unschärfe/ändern, oder nach einer kurzen pause der Inaktivität, nach der Eingabe ein Datum in (letztere kann nicht besonders gut funktionieren in der realen Welt, aber es sieht irgendwie cool. nehmen Sie es aus, wenn es etwas merkwürdig ist). Das andere Defizit ist, es verwendet die Standardeinstellung des Browsers Mechanismus zum analysieren einer Date. Wenn dies nicht ausreichend ist, ersetzen Sie es mit etwas, das ist. Ich bin sicher, es ist weit entfernt von der Serienreife, aber es ist ein Anfang. Wenn es hilfreich ist genug, ich werde es in ein formales Modul auf 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);
      }
    };
  }]);

Verwendung:

Gehören die Richtlinie von dieser plunk in-Modul, dann in Ihre HTML verwenden

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

Filter-Konzept

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>

oder im controller

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

Datum, filtern und formatieren