如何格式化`ng-model`中日期对象的日期

时间:2016-04-03 04:41:27

标签: angularjs date

我从控制器的ng-model获取日期值。我想将日期格式设置为10-22-2013但是在输出中我将日期格式设为10/22/2013

这里格式化日期的正确方法是什么?

js:

angular.module('dateInputExample', [])
     .controller('DateController', ['$scope', function($scope) {
       $scope.example = {
         value: new Date(2013, 9, 22)
       };
     }]);

html:

<form name="myForm" ng-controller="DateController as dateCtrl">
   <label for="exampleInput">Pick a date </label>
     <input type="date" id="exampleInput" name="input" ng-model="example.value" 
       placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
   <div role="alert">
     <span class="error" ng-show="myForm.input.$error.required">
         Required!</span>
     <span class="error" ng-show="myForm.input.$error.date">
         Not a valid date!</span>
    </div>

</form>

Live Demo

1 个答案:

答案 0 :(得分:2)

使用纯HTML5,您的问题没有答案。请参阅此link

  

无法更改格式

     

我们必须区分电线格式和   浏览器的演示格式。

     

有线格式HTML5日期输入规范1指的是   RFC3339规范2,指定全日期格式相等   至:yyyy-mm-dd。有关更多信息,请参见RFC3339规范的5.6节   的信息。

     

演示文稿格式浏览器在呈现方式上不受限制   日期输入。在撰写本文时,Chrome拥有最广泛的日期   支持[3]。它使用用户的本地日历显示日期选择器   格式。 Opera(v10.6 +)也显示日期选择器,但显示日期   在电线格式。其他浏览器,如Firefox 44.0.2和   Internet Explorer 9/10/11显示带有电线的文本输入字段   格式。

     

参考文献http://www.w3.org/TR/html-markup/input.date.html   http://tools.ietf.org/html/rfc3339   https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec

我建议使用angular-ui。它有一个整齐的模块负载,使一切都很容易角度。

视图中的标记如下所示:

<p class="form-group">
    <label>Result</label>
    <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" />
</p>

在控制器上:

angular.module('ui.bootstrap.demo').controller('DateParserDemoCtrl', function ($scope, uibDateParser) {
  $scope.format = 'MM-dd-yyyy';
  $scope.date = new Date();
});