简单的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');
});

演示JS小提琴与Date.js
演示JS小提琴与Moment.js