Html Angular.js 和 HTML5 日期输入值——如何让 Firefox 在日期输入中显示可读的日期值？

Angular.js and HTML5 date input value -- how to get Firefox to show a readable date value in a date input?

提问by Elise

I have an HTML5 date input and I would like its value to be set to the value of the date property in my model by default. I'm not too fussy about formatting since Chrome seems to decide that for me anyway based on my locale, but ideally the format would be consistently dd/MM/yyyy.

我有一个 HTML5 日期输入，我希望它的值默认设置为我模型中日期属性的值。我对格式不太挑剔，因为 Chrome 似乎根据我的语言环境为我决定了，但理想情况下，格式应该是dd/MM/yyyy.

Fiddle

小提琴

This is how I set up my input:

这是我设置输入的方式：

<input type="date" 
       ng-model="date" 
       value="{{ date | date: 'yyyy-MM-dd' }}" />

This works fine on Chrome, and I see the following by default:

这在 Chrome 上运行良好，默认情况下我会看到以下内容：

(I still don't quite understand why the value had to be given in yyyy-MM-dd, if Chrome still formats it based on my locale, but that's a different question.)

（yyyy-MM-dd如果 Chrome 仍然根据我的语言环境对其进行格式化，我仍然不太明白为什么必须在.

My issue is with Firefox not showing the date's value in the way I've specified. I think this has to do with binding the input to the datemodel, because I can specify pretty much any string in the valueattribute, and I will still see the long date string in the input by default:

我的问题是 Firefox 没有按照我指定的方式显示日期值。我认为这与将输入绑定到date模型有关，因为我可以在value属性中指定几乎任何字符串，并且默认情况下我仍然会在输入中看到长日期字符串：

If I remove ng-model="date"from the input tag, Firefox nicely displays any value I give it. I didn't think the model that an input was bound to actually had any effect on its default value?

如果我ng-model="date"从 input 标签中删除，Firefox 会很好地显示我给它的任何值。我不认为输入绑定的模型实际上对其默认值有任何影响？

I understand the date input isn't supported universally, but seeing as it's supposed to fall back on a simple text input, I don't see why its value won't simply be 2013-08-05, as specified by angular's date filter.

我知道日期输入不是普遍支持的，但是看到它应该回到简单的文本输入上，我不明白为什么它的值不会简单地为2013-08-05，如 angular 的日期过滤器所指定的那样。

So, how do I get Firefox to accept my formatted value in the date input?

那么，如何让 Firefox 在日期输入中接受我的格式化值？

---

---

NOTEAfter the edits have been done by the user, I will of course perform validation and convert each date input value into a proper Dateobject. Not sure if this is relevant to the question, but putting it out there just in case, because the input formats would obviously need to be consistent for the date conversion to work the same in all browsers. Problematic, of course, with Chrome deciding the input format for me...

注意在用户完成编辑后，我当然会执行验证并将每个日期输入值转换为适当的Date对象。不确定这是否与问题有关，但将其放在那里以防万一，因为输入格式显然需要一致，日期转换才能在所有浏览器中正常工作。有问题，当然，Chrome 为我决定输入格式......

回答by Blackhole

The problem is that valueis ignored when ng-modelis present.

问题是value当ng-model存在时被忽略。

Firefox, which doesn't currently support type="date", will convert all the values to string. Since you (rightly) want dateto be a real Dateobject and not a string, I think the best choice is to create another variable, for instance dateString, and then link the two variables:

当前不支持 的 Firefoxtype="date"会将所有值转换为字符串。由于您（正确地）希望date成为真实Date对象而不是字符串，因此我认为最好的选择是创建另一个变量，例如dateString，然后链接两个变量：

<input type="date" ng-model="dateString" />

function MainCtrl($scope, dateFilter) {
    $scope.date = new Date();

    $scope.$watch('date', function (date)
    {
        $scope.dateString = dateFilter(date, 'yyyy-MM-dd');
    });

    $scope.$watch('dateString', function (dateString)
    {
        $scope.date = new Date(dateString);
    });
}

Fiddle

Fiddle

The actual structure is for demonstration purposes only. You'd be better off creating your own directive, especially in order to:

实际结构仅用于演示目的。您最好创建自己的指令，尤其是为了：

• allow formats other than yyyy-MM-dd,
• be able to use NgModelController#$formattersand NgModelController#$parsersrather than the artifical dateStringvariable (see the documentationon this subject).

• 允许除yyyy-MM-dd,以外的格式
• 能够使用NgModelController#$formattersandNgModelController#$parsers而不是人工dateString变量（请参阅有关此主题的文档）。

Please notice that I've used yyyy-MM-dd, because it's a format directly supported by the JavaScript Dateobject. In case you want to use another one, you must make the conversionyourself.

请注意，我使用了yyyy-MM-dd，因为它是 JavaScriptDate对象直接支持的格式。如果您想使用另一个，您必须自己进行转换。

---

---

EDIT

编辑

Here is a way to make a clean directive:

这是一种制作干净指令的方法：

myModule.directive(
    'dateInput',
    function(dateFilter) {
        return {
            require: 'ngModel',
            template: '<input type="date"></input>',
            replace: true,
            link: function(scope, elm, attrs, ngModelCtrl) {
                ngModelCtrl.$formatters.unshift(function (modelValue) {
                    return dateFilter(modelValue, 'yyyy-MM-dd');
                });

                ngModelCtrl.$parsers.unshift(function(viewValue) {
                    return new Date(viewValue);
                });
            },
        };
});

Fiddle

Fiddle

That's a basic directive, there's still a lot of room for improvement, for example:

这是一个基本指令，还有很大的改进空间，例如：

• allow the use of a custom format instead of yyyy-MM-dd,
• check that the date typed by the user is correct.

• 允许使用自定义格式而不是yyyy-MM-dd,
• 检查用户输入的日期是否正确。

回答by zs2020

Why the value had to be given in yyyy-MM-dd?

为什么必须在 yyyy-MM-dd 中给出该值？

According to the input type = date specof HTML 5, the value has to be in the format yyyy-MM-ddsince it takes the format of a valid full-datewhich is specified in RFC3339as

根据HTML 5的输入类型 = 日期规范，该值必须采用格式，yyyy-MM-dd因为它采用RFC3339中full-date指定的有效格式

full-date = date-fullyear "-" date-month "-" date-mday

There is nothing to do with Angularjs since the directive input doesn't support datetype.

与 Angularjs 无关，因为指令输入不支持date类型。

How do I get Firefox to accept my formatted value in the date input?

如何让 Firefox 在日期输入中接受我的格式化值？

FF doesn't support datetype of input for at least up to the version 24.0. You can get this info from here. So for right now, if you use input with type being datein FF, the text box takes whatever value you pass in.

FFdate至少在 24.0.0 版本之前不支持输入类型。您可以从此处获取此信息。因此，目前，如果您使用类型为dateFF 的输入，则文本框会接受您传入的任何值。

My suggestion is you can use Angular-ui's Timepickerand don't use the HTML5 support for the date input.

我的建议是您可以使用Angular-ui 的 Timepicker，并且不要使用 HTML5 支持日期输入。

回答by Debashis Bhattacharyya

You can use this, it works fine:

您可以使用它，它工作正常：

<input type="date" class="form1"  
  value="{{date | date:MM/dd/yyyy}}"
  ng-model="date" 
  name="id" 
  validatedateformat 
  data-date-format="mm/dd/yyyy"
  maxlength="10" 
  id="id" 
  calendar 
  maxdate="todays"
  ng-click="openCalendar('id')">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar" ng-click="openCalendar('id')"></span>
    </span>
</input>

回答by Giovanni De Rosa

In my case, I have solved this way:

就我而言，我已经解决了这个问题：

$scope.MyObject = // get from database or other sources;
$scope.MyObject.Date = new Date($scope.MyObject.Date);

and input type date is ok

输入类型日期没问题

回答by hypery2k

I've used ng-change:

我用过 ng-change：

Date.prototype.addDays = function(days) {
  var dat = new Date(this.valueOf());
  dat.setDate(dat.getDate() + days);
  return dat;
}

var app = angular.module('myApp', []);

app.controller('DateController', ['$rootScope', '$scope',
  function($rootScope, $scope) {
    function init() {
      $scope.startDate = new Date();
      $scope.endDate = $scope.startDate.addDays(14);
    }


    function load() {
      alert($scope.startDate);
      alert($scope.endDate);
    }

    init();
    // public methods
    $scope.load = load;
    $scope.setStart = function(date) {
      $scope.startDate = date;
    };
    $scope.setEnd = function(date) {
      $scope.endDate = date;
    };

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-controller="DateController">
  <label class="item-input"> <span class="input-label">Start</span>
    <input type="date" data-ng-model="startDate" ng-change="setStart(startDate)" required validatedateformat calendar>
  </label>
  <label class="item-input"> <span class="input-label">End</span>
    <input type="date" data-ng-model="endDate" ng-change="setEnd(endDate)" required validatedateformat calendar>
  </label>
  <button button="button" ng-disabled="planningForm.$invalid" ng-click="load()" class="button button-positive">
    Run
  </button>
</div <label class="item-input"> <span class="input-label">Start</span>
<input type="date" data-ng-model="startDate" ng-change="setStart(startDate)" required validatedateformat calendar>
</label>
<label class="item-input"> <span class="input-label">End</span>
  <input type="date" data-ng-model="endDate" ng-change="setEnd(endDate)" required validatedateformat calendar>
</label>

回答by Alejandro Teixeira Mu?oz

Check this fully functional directive for MEAN.JS (Angular.js, bootstrap, Express.js and MongoDb)

检查这个 MEAN.JS 的全功能指令（Angular.js、bootstrap、Express.js 和 MongoDb）

Based on @Blackhole ′s response, we just finished it to be used with mongodb and express.

根据@Blackhole 的回应，我们刚刚完成了它与 mongodb 和 express 的使用。

It will allow you to save and load dates from a mongoose connector

它将允许您从猫鼬连接器保存和加载日期

Hope it Helps!!

希望能帮助到你！！

angular.module('myApp')
.directive(
  'dateInput',
  function(dateFilter) {
    return {
      require: 'ngModel',
      template: '<input type="date" class="form-control"></input>',
      replace: true,
      link: function(scope, elm, attrs, ngModelCtrl) {
        ngModelCtrl.$formatters.unshift(function (modelValue) {
          return dateFilter(modelValue, 'yyyy-MM-dd');
        });

        ngModelCtrl.$parsers.push(function(modelValue){
           return angular.toJson(modelValue,true)
          .substring(1,angular.toJson(modelValue).length-1);
        })

      }
    };
  });

The JADE/HTML:

玉石/HTML：

div(date-input, ng-model="modelDate")

回答by John Rix

If using Angular Material Design, you can use the datepicker component there and this will work in Firefox, IE etc.

如果使用 Angular Material Design，您可以在那里使用 datepicker 组件，这将适用于 Firefox、IE 等。

https://material.angularjs.org/latest/demo/datepicker

https://material.angularjs.org/latest/demo/datepicker

Fair warning though - personal experience is that there are problems with this, and seemingly it is being re-worked at present. See here:

公平的警告 - 个人经验是这有问题，目前似乎正在重新工作。看这里：

https://github.com/angular/material/issues/4856

https://github.com/angular/material/issues/4856