AngularJS如何通过不同HTML控件修改同一datetime模型的部分值

问题原因 #

ng-model 指令要求绑定的是可赋值的AngularJS表达式，你直接在ng-model中使用过滤器，过滤器返回的是格式化后的临时字符串，没有对应的作用域变量承接写入操作，所以会抛出表达式不可赋值的报错，输入框自然无法编辑。

修复方案 #

我们可以通过引入两个临时变量承接日期、时间部分的输入，再通过变更监听同步回原date对象实现需求：

1. 模板代码修改

<div ng-controller="MainCtrl">
  <input type="text" ng-model="datePart" ng-change="syncDate()" />
  <input type="text" ng-model="timePart" ng-change="syncDate()" />

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

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

2. 控制器代码修改

angular.module('app', []).controller('MainCtrl', function($scope, $filter) {
  $scope.show = false;
  $scope.date = new Date(Date.now());
  // 初始化日期、时间部分的临时绑定变量
  $scope.datePart = $filter('date')($scope.date, 'yyyy-MM-dd');
  $scope.timePart = $filter('date')($scope.date, 'HH:mm');

  // 双向同步逻辑
  $scope.syncDate = function() {
    // 拆分日期、时间部分的输入值
    const [year, month, day] = $scope.datePart.split('-').map(Number);
    const [hour, minute] = $scope.timePart.split(':').map(Number);
    // 更新原date对象，注意JS的Date月份从0开始计数，需要减1
    $scope.date = new Date(year, month - 1, day, hour, minute);
  };

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

如果需要更高的健壮性，可以在syncDate中增加格式合法性校验，避免非法输入生成无效的Date对象。

内容的提问来源于stack exchange，提问作者jeconner