简单的angularjs日期输入

一尘不染

简单的angularjs日期输入

angularjs

我有一个活动的编辑页面，我的一个字段是日期。在某些浏览器中，它看起来像纯文本框（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是否提供与其他浏览器不同的体验-
它只是一个简单的内部用户网站。我只是不喜欢编辑记录时没有预填充日期。

阅读 311

2020-07-04

共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');
});

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

2020-07-04