angularJS中的日期类型字段绑定问题

时间:2016-02-16 01:57:35

标签: angularjs

这是我的projectController:

(function () {
    var app = angular.module("myApp");

    var projectController = function ($scope, $location) {

        var currentDate = new Date();
        $scope.startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
    };

    app.controller("projectController", projectController);
}());

这是我的控件绑定:

<input type="datetime-local" class="form-control"  name="startDate" ng-model='startDate' />
                            <span class="text-danger" ng-show="myForm.startDate.$error.date">Not a valid date.</span>

但是当价值显示在对照“2016-02-15”中时。如何在控件中以 MM / dd / yyyy 格式显示日期?

3 个答案:

答案 0 :(得分:1)

您可以通过获取日,月和年并在变量中存储每个日期来显示预期输出中的日期。

这是小提琴:https://jsfiddle.net/rrwfu834/1/

HTML:

<input date-time format="yyyy-MM-dd HH:mm">

控制器:

<div ng-app="test">
  <div ng-controller="DateCtrl">
    <input type="datetime-local" class="form-control" name="startDate" ng-model='startDate' />
      <span class="text-danger" ng-show="myForm.startDate.$error.date">Not a valid date.
      </span>
  </div>
</div>

答案 1 :(得分:0)

你可以使用angular-datepicker。 代码如下:

function delayed_fetch(delay, namespace, id, issueIds, filters) {
  setTimeout(
    function() { 
      var issueId=issueIds.shift();
      github.fetchIssue(namespace, id, issueId, filters).then(function(response) {
        console.log('Writing: ' + issueId);
        writeIssueToDisk(fetchIssueCallback(response));
        delayed_fetch(0, namespace, id, issueIds, filters);
      });
    }, delay);
}

var i=0;
_.each([ [1,2] , [3,4], [5,6], [7,8], [9,10] ], function(issueIds) {
        var delay=++i*200; // millisecond
        delayed_fetch(delay, repo.namespace, repo.id, issueIds, filters);
});

datepicker

您还可以使用ng-pattern进行验证以匹配正则表达式。

答案 2 :(得分:-1)

您可以添加日期过滤器来解析日期:

<input type="datetime-local" class="form-control"  name="startDate" ng-model='startDate' />
                        <span class="text-danger" ng-show="myForm.startDate.$error.date | date: 'mediumDate' ">Not a valid date.</span>

如果您想以mm / dd / yy格式设置控制器的日期,请使用:

$scope.result = $filter('date')(new Date(), 'mediumDate');