AngularJS：如何从不同的 html 控件编辑日期时间的各个部分

Question

我想将 2 个文本框分配给初始化为 Date.now() 的同一个 ng-model，并允许用户编辑它们。

我的模板如下所示：

<div ng-controller="MainCtrl">
  <input type="text" ng-model="date | date:'yyyy-MM-dd'" />
  <input type="text" ng-model="date | date:'HH:mm'" />

  <button ng-click="submit()">Submit</button>

  <div ng-if="show">
    {{ date }}
  </div>
</div>

我的控制器看起来像：

angular.module('app', []).controller('MainCtrl', function($scope) {
  $scope.show = false;
  $scope.date = new Date(Date.now());

  $scope.submit = function () {
    $scope.show = true;
  }
});

笨蛋：http://plnkr.co/edit/d2slQW6pDTLM4KTo

在我的例子中，文本框是不可编辑的，我收到一个控制台错误，指出表达式是不可分配的。

如何修改此示例以允许修改日期部分？

Answer 1

如果您愿意使用日期和时间输入而不是文本，这很容易做到。

<input type="date" ng-model="date" />
<input type="time" ng-model="date" />

因为它们绑定到同一个 Date 实例，所以支持闰日夏令时（一天可能是 23 或 25 小时）。

如果您不喜欢本机日期和时间输入，并希望更好地控制 style/functionality 并在设备之间保持一致 UI，您可以尝试 Kendo UI 的 DatePicker and TimePicker 小部件。它们都有 AngularJS 支持，并包含在名为 Kendo UI Core 的免费产品中。

如果您想避免在您的时间选择器中使用毫秒，请确保将它们从绑定到您的范围的任何 Date 实例中删除属性。

$scope.date = new Date(Date.now());
$scope.date.setMilliseconds(0)

顺便说一句，我认为过滤器在 ng-model 表达式中不起作用，这可能是您的错误消息的来源。

AngularJS：如何从不同的 html 控件编辑日期时间的各个部分

AngularJS: How to edit parts of a datetime from different html controls

angularjs