Javascript Angular.js<；输入类型="；日期“&燃气轮机；更改提交值的格式

上面的代码在url上推送startDate和endDate值，但我的问题是提交的值类似于2014-12-01，我希望我的格式是01-05-2014

---

有什么建议吗？

好吧，输入日期会给你一个到达目的地的日期。如果您希望格式化日期，您可能需要这样一个函数：

$scope.getStatistics = function(startDate, endDate) {
    $http.get('/admin/api/stats?start=' + startDate + '&end=' + endDate).success(function(data) {
        $scope.stats = data;
    });
}

我将+1添加到月份中，因为getMonth返回一个介于0和11之间的数字。 片（-2）用于前导0。

使用过滤器概念

function formatDate(isoDateString)
{
  var newDate = new Date(isoDateString);
  return ('0' + newDate.getDate()).slice(-2)+"-"+('0' + (newDate.getMonth() + 1)).slice(-2)+"-"+newDate.getFullYear();
}

---

不幸的是，实现处理日期的特定元素类型的浏览器（如Chrome）使用OS日期格式，而我所知的浏览器都不允许您更改格式（甚至不在W3C规范中）。此外，如果浏览器不支持它（大多数），它将使用常规文本输入，但只接受ISO-8601格式的数据，这会使情况变得更糟

就我个人而言，我避免使用

type=“date”

，因为按照现状，它几乎毫无价值，除非您使用的是支持它的移动设备（如iOS）。因此，如果可以，请使用文本输入，如果希望它将文本值转换为要分配给模型的日期对象，并在更新时重新格式化，则需要找到或编写一个指令来执行此操作。虽然有，但它不会为您重新设置日期，并带来可能超出您需要的更多内容。可能还有其他人

然而，为了回答您的问题，我编写了一个演示指令，将输入的日期重新格式化为您选择的格式（使用Angular's）。它将在粘贴、模糊/更改时重新格式化，或者在键入日期后短暂暂停不活动（后者在现实世界中可能不太管用，但看起来有点酷。如果它很奇怪，就把它拿出来）。另一个不足之处是它使用浏览器的默认机制解析

日期

。如果这是不够的，用正确的东西替换它。我确信它还远没有准备好生产，但这只是一个开始。如果它足够有用，我将把它转换成Github上的一个正式模块

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

用法：

在模块中包含，然后在HTML中使用

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

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

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

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