Question

我有一个活动的编辑页面，其中一个字段是日期。在某些浏览器中，它似乎就像纯文本框（IE8），但在Chrome中它显示＆＃34; dd / mm / yyyy＆＃34;如果你点击它，它有一些额外的选项来设置日期。

我的问题是在编辑页面上没有填充现有日期（我想因为它的格式不正确？）。 MVC控制器以这种格式返回数据＆＃34; 2014-03-08T00：00：00＆＃34; （只使用基本的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" />

但是，我强烈建议您创建自定义日期字段指令。

自定义输入字段指令具有以下优点：

模型和视图之间的双向绑定。例如，当您在输入字段中输入有效日期时，它会自动为模型分配javascript日期;当您将有效的javascript日期指定为模型时，它将在文本字段中自动对其进行格式化。
表单验证支持。输入无效日期时，可以设置$ error标志，该标志可用于视图绑定（即显示错误消息）。设置错误标志也会将form.$valid设置为false，以便您可以有条件地将表单提交给服务器。

实现自定义日期指令时需要考虑三个基本事项：

解析输入文本并返回模型的解析器     （在这种情况下，javascript日期）。

格式化程序，它将格式化模型并在文本字段中显示它。

设置可在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与{{3}}

简单的angularjs日期输入

1 个答案: