我有一個要求,允許用戶爲日期範圍的開始和結束設置日期&時間。由於輸入類型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中,以便我可以看到發生了什麼。我還將輸入的最小值設置爲它們加載的日期和時間。
如果您加載片段,然後更改值,您會注意到,在某些設置中,不僅輸入標記爲無效,而且日期對象完全從該範圍中消失。有時在撤銷更改時要退回。
這是預期的行爲?我試圖做一些瘋狂的事情,將單獨的日期&時間輸入作爲一個單一的日期時間模型?
我正在用Chrome瀏覽45.0.2454.85米。我所看到的是日期和時間控件在輸入或使用旋轉按鈕時不會強制執行'min'屬性設置,並且當日期輸入中的'min'設置被違反時'theDate'屬性會從模型中消失。所以這種行爲是合乎邏輯的,但也有點尷尬。 –