以角度绑定日期和时间到单个日期模型

我有一个要求，允许用户为日期范围的开始和结束设置日期&时间。由于输入类型datetime-local目前在firefox和IE中不受支持，因此我无法使用它。所以我希望在日期和时间输入中共享一个日期模型。以角度绑定日期和时间到单个日期模型

像这样：

angular.module('date.deleter', []) 
 
    .controller('DateDeleteController', function($scope) { 
 
     //force display to be a bit more human-readable 
 
     var loadedAt = new Date(new Date().toISOString().slice(0, 19)); 
 
     $scope.data = { 
 
     theDate: loadedAt, 
 
     minDate: loadedAt 
 
     }; 
 
    })

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="date.deleter" ng-form="dateDeletingForm"> 
 
    <div ng-controller="DateDeleteController"> 
 
    <h1>Change Something And Watch Date Dissappear o_O</h1> 
 
    <input type="date" id="theDate" name="theDate" ng-model="data.theDate" min="{{data.minDate | date:'yyyy-MM-dd'}}" placeholder="yyyy-MM-dd"> 
 
    <input type="time" id="theStartTime" name="theStartTime" ng-model="data.theDate" min="{{data.minDate | date:'HH:mm:ss'}}" placeholder="HH:mm:ss"> 
 

 
    <h3>output the scope here</h3> 
 
    <pre>{{data}}</pre> 
 

 
</html>

在片断我设置一个日期对象到是日期和时间输入的模型。然后将范围数据对象输出到一个div中，以便我可以看到发生了什么。我还将输入的最小值设置为它们加载的日期和时间。

如果您加载片段，然后更改值，您会注意到，在某些设置中，不仅输入标记为无效，而且日期对象完全从该范围中消失。有时在撤销更改时要退回。

这是预期的行为？我试图做一些疯狂的事情，将单独的日期&时间输入作为一个单一的日期时间模型？

来源

2015-09-21 Paul D' Ambra

我正在用Chrome浏览45.0.2454.85米。我所看到的是日期和时间控件在输入或使用旋转按钮时不会强制执行'min'属性设置，并且当日期输入中的'min'设置被违反时'theDate'属性会从模型中消失。所以这种行为是合乎逻辑的，但也有点尴尬。 –