簡單的angularjs日期輸入

Question

我有一個事件的編輯頁面，其中一個字段是日期。在某些瀏覽器中，它看起來像純文本框（IE8），但是在Chrome中顯示爲「dd/mm/yyyy」，如果點擊它，它還有一些其他選項用於設置日期。

雖然我的問題是在編輯頁面沒有填充現有的日期（我想象，因爲它不是正確的格式？）。 MVC控制器以這種格式「2014-03-08T00：00：00」返回數據（僅使用基本的CRUD控制器操作）。

<form name="form" class="form-horizontal"> 
<div class="control-group" ng-class="{error: form.EventDate.$invalid}"> 
     <label class="control-label" for="EventDate">Event Date</label> 
     <div class="controls"> 
      <input type="date" ng-model="item.EventDate" id="EventDate"> 
     </div> 
    </div> 
<div class="form-actions"> 
     <button ng-click="save()" class="btn btn-primary"> 
      {{action}} 
     </button> 
     <a href="#/" class="btn">Cancel</a> 
    </div> 
</form> 

我在使用指令和手錶上看過不少文章，但看起來很複雜。我原以爲會有一種相對簡單的格式化模型數據的方式，以便以正確的格式顯示並按預期工作。我不介意Chrome是否會提供與其他瀏覽器不同的體驗 - 它只是一個簡單的內部用戶網站。我只是不喜歡它沒有預先編輯記錄的日期。

Answer 1

如果要填充字段的初始值，那麼下面的工作

//Controller: 
$scope.myDate = new Date('2014-03-08T00:00:00'); 

//HTML: 
<input type="date" ng-init="model=(myDate | date:'yyyy-MM-dd')" ng-model="model" /> 

不過，我強烈建議創建一個自定義日期字段指令。

一個自定義輸入區的指令具有以下優點：模型和視圖之間

1. 雙向綁定。 例如，當您在輸入字段中輸入有效日期時，它會自動爲模型分配一個javascript日期;並且當您將有效的javascript日期作爲模型分配時，它將自動在文本字段中對其進行格式化。
2. 表單驗證支持。輸入無效日期時，您可以設置$ error標誌，該標誌可用於視圖綁定中（即顯示錯誤消息）。設置錯誤標誌也會將form.$valid設置爲false，以便您可以有條件地將表單提交給服務器。

有實現自定義的日期指示時要考慮三個基本的東西：

1. 解析器將解析輸入文本和返回模型 （在這種情況下，一個javascript日期） 。
2. 格式化程序將格式化模型並將其顯示在文本字段中。
3. 設置可用於UI 中的自定義表單驗證的可選驗證標誌。

日期指令：

myApp.directive('dateField', function($filter) { 
    return { 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelController) { 
      ngModelController.$parsers.push(function(data) { 

       //View -> Model 
       var date = Date.parseExact(data,'yyyy-MM-dd'); 

       // if the date field is not a valid date 
       // then set a 'date' error flag by calling $setValidity 
       ngModelController.$setValidity('date', date!=null); 
       return date == null ? undefined : date; 
      }); 
      ngModelController.$formatters.push(function(data) { 
       //Model -> View 
       return $filter('date')(data, "yyyy-MM-dd"); 
      });  
     } 
    } 
}); 

注：對於分析日期，該指令使用Date.js（外部庫）。

CSS：

.error { 
    color:red; 
} 
.error-border { 
    border: solid 2px red; 
} 

HTML：

<form name="myForm"> 
    <input ng-class="{'error-border': myForm.myDate.$error.date}" type="date" 
      name="myDate" ng-model="myDate" date-field /> 
       <span ng-show="myForm.myDate.$error.date" class="error"> 
        Please enter a valid date!!! 
       </span>    
     <br /> Raw Date: {{myDate}} 
     <br /> Formatted Nicely: {{ myDate | date:'yyyy, MMMM dd'}}  
     <br /> Is Valid Date? {{ !myForm.myDate.$error.date}} 
     <br /> Is Form Valid? {{ myForm.$valid }} 
</form> 

控制器：

myApp.controller('ctrl', function($scope) { 
    $scope.myDate = new Date('2014-03-08T00:00:00'); 
}); 

Demo JS Fiddle與Date.js
Demo JS Fiddle與Moment.js