简单的 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