AngularJS中ng-model为input time赋值失败及[ngModel:datefmt]错误排查

嘿，我刚好踩过这个坑！你遇到的[ngModel:datefmt]错误，本质就是AngularJS对type="time"的输入框有严格的格式要求——它只认符合ISO 8601标准的时间字符串，或者合法的Date对象，其他格式都会触发这个错误，导致输入框不显示值。

先看你可能写错的代码示例 #

大概率你是传了非标准格式的时间字符串，比如带AM/PM的12小时制，或者用了错误的分隔符：

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="time" ng-model="selectedTime">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  // ❌ 错误格式：带AM/PM的12小时制
  $scope.selectedTime = "10:30 AM";
  // ❌ 错误格式：用了横杠分隔
  // $scope.selectedTime = "10-30";
});
</script>

这种写法就会直接触发[ngModel:datefmt]错误，输入框自然不会显示你要的时间。

正确的解决方案 #

分三种场景给你对应写法：

1. 直接使用标准格式的时间字符串

AngularJS接受的标准时间格式是24小时制的HH:mm或者HH:mm:ss，直接传这种格式的字符串就行：

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="time" ng-model="selectedTime">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  // ✅ 正确格式：24小时制HH:mm
  $scope.selectedTime = "14:30";
  // ✅ 也可以带秒数：HH:mm:ss
  // $scope.selectedTime = "09:15:45";
});
</script>

2. 转换非标准格式的时间（比如12小时制转24小时制）

如果你的原始时间是带AM/PM的12小时制，先写个小工具函数转换成标准格式：

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="time" ng-model="selectedTime">
</div>

<script>
var app = angular.module('myApp', []);

// 12小时制转24小时制的工具函数
function convertTo24Hour(timeStr) {
  const [time, period] = timeStr.split(' ');
  let [hours, minutes] = time.split(':');
  
  if (period === 'PM' && hours !== '12') {
    hours = String(parseInt(hours) + 12);
  }
  if (period === 'AM' && hours === '12') {
    hours = '00';
  }
  
  return `${hours}:${minutes}`;
}

app.controller('myCtrl', function($scope) {
  const originalTime = "10:30 PM";
  // 转换成标准格式"22:30"再绑定
  $scope.selectedTime = convertTo24Hour(originalTime);
});
</script>

3. 使用Date对象绑定

如果你手上有Date对象，直接绑定也可以，AngularJS会自动提取它的时间部分显示在输入框里：

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="time" ng-model="selectedTime">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  // ✅ 绑定当前时间的Date对象
  $scope.selectedTime = new Date();
  // ✅ 也可以绑定指定时间的Date对象
  // $scope.selectedTime = new Date('2024-05-20T16:45:00');
});
</script>

额外小提示 #

当你在输入框手动修改时间后，ngModel返回的值也会是符合ISO标准的字符串（比如你选了10:30，$scope.selectedTime可能会变成"10:30:00"，具体取决于浏览器的实现），双向绑定是完全没问题的。

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