使用 AngularJs 更改输入日期的格式未按预期工作答案

【问题标题】：Changing the format of an input date with AngularJs not working as expected使用 AngularJs 更改输入日期的格式未按预期工作
【发布时间】：2015-11-20 17:40:34
【问题描述】：

好吧，我想显示一个输入日期字段，但格式已更改。

我的意思是，默认格式是：yyyy-MM-dd (2015-11-20)，但我想要它：(11-20-2015)。

我用momentjs（没有角度）找到了一个jsfiddle，它可以完全按照我的意愿工作。

使用 AngularJs，我也使用了指令，但使用了 span 字段（并且有效）。但如果我使用输入日期，它就不起作用。

这是html：

<body ng-app="docsTimeDirective">
  <div ng-controller="Controller">
  Current date is: <span my-current-time="format"></span><hr/>
  <input type="date" ng-model="myDate.value" my-current-time="format">
</div>
</body>

还有Js：

(function(angular) {
  'use strict';
angular.module('docsTimeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.format = 'MM/dd/yyyy';
    $scope.myDate = {
      value: new Date()
    };
  }])
  .directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {

    function link(scope, element, attrs) {
      var format,
          timeoutId;

      function updateTime() {
        element.text(dateFilter(new Date(), format));
        console.log(dateFilter(new Date(), format));
      }

      scope.$watch(attrs.myCurrentTime, function(value) {
        format = value;
        updateTime();
      });

      element.on('$destroy', function() {
        $interval.cancel(timeoutId);
      });

      // start the UI update process; save the timeoutId for canceling
      timeoutId = $interval(function() {
        updateTime(); // update DOM
      }, 1000);
    }

    return {
      link: link
    };
  }]);
})(window.angular);

这里是Plunker。有什么想法吗？

【问题讨论】：

标签： javascript html angularjs angularjs-directive

【解决方案1】：

这是因为.text() 不适用于<input /> 元素。你需要.val()。

您可以做一个非常基本的检查来涵盖这两种情况。观察以下（未经测试）...

element[0].value !== undefined ? element.val(/*...*/) : element.text(/*...*/)

此外，每次讨论时，请记住 total lack of cross browser support 对应于 type="date"。也许在这里找到一个现成的日期选择器可能符合您的最大利益 - 也可能解决您的格式限制难题。

【讨论】：

好的，我用element.val(dateFilter(new Date(), format));试了一下，然后抛出：The specified value "11/20/2015" does not conform to the required format, "yyyy-MM-dd"
输入type="date" - 它确实需要采用这种格式。你确认dateFilter返回的日期的返回值了吗？ Here is a fiddle 以最简单的形式显示日期输入
你看到 plunkr 了吗？在span 字段中返回我想要的日期。
还有你提供的第一个小提琴 - 时刻正在那里做一些自定义工作。如果您检查该日期选择器，您将看到适当的值，例如value="2015-11-20"。您将研究一些自定义 AngularJS 工作，以使 <input> 看起来不同
@robe007 给this fiddle 看看格式

【解决方案2】：

嗯，我已经通过两种方式解决了我的问题：

1) 使用 MomentJs

attrs.$set('myCurrentDate', momentFilter(date, format));

然后

.filter('moment', function () {
    return function (date, formated) {
        moment.locale('es');
        var momented = moment(date).format(formated);
        return momented;
    };
});

See the Plunker

2) 使用 Javascript 原生 Date 对象

attrs.$set('myCurrentDate', dateFilter(date, format));

See the Plunker

但在这两种情况下，在 css 的帮助下：

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(my-current-date);
    display: inline-block;
    color: black;
}

PS：注意两种情况下变量$scope.format定义的区别。

编辑：

但如果我们不想复杂化，我们可以使用 AngularUI 中出色的 datepicker。它有很多功能。

这将我带到解决我的问题的第三种方式：See the Plunker

【讨论】：