2015-09-21 29 views
2

我有一個要求,允許用戶爲日期範圍的開始和結束設置日期&時間。由於輸入類型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中,以便我可以看到發生了什麼。我還將輸入的最小值設置爲它們加載的日期和時間。

如果您加載片段,然後更改值,您會注意到,在某些設置中,不僅輸入標記爲無效,而且日期對象完全從該範圍中消失。有時在撤銷更改時要退回。

這是預期的行爲?我試圖做一些瘋狂的事情,將單獨的日期&時間輸入作爲一個單一的日期時間模型?

+1

我正在用Chrome瀏覽45.0.2454.85米。我所看到的是日期和時間控件在輸入或使用旋轉按鈕時不會強制執行'min'屬性設置,並且當日期輸入中的'min'設置被違反時'theDate'屬性會從模型中消失。所以這種行爲是合乎邏輯的,但也有點尷尬。 –

回答

0

因此,爲了可能通過Google在這裏結束的人的利益,我試圖做一些瘋狂的事情!

documentation for the time input說:

型號必須是Date對象。此綁定將始終將1970年1月1日或本地日期新日期(1970,0,1,HH,mm,ss)輸出Date對象

因此,如果更改時間字段,則綁定模型的日期可能將設置爲1/1/1970。我還注意到,時區也在應用,所以有時在時間域中設置00:15實際上會在前一天的23:15設置。

但是,如果模型被標記爲無效,它將從範圍中消失。我認爲這很奇怪,但現在我知道,我可以忍受它。