Angular.js和HTML5日期輸入值 - 如何讓Firefox在日期輸入中顯示可讀日期值？

Question

我有一個HTML5日期輸入，我希望默認情況下將其值設置為我的模型中的日期屬性的值。 我對格式化並不是太挑剔，因為Chrome似乎根據我的語言環境決定對我來說，但理想情況下格式將始終為dd/MM/yyyy 。

小提琴

這是我設置輸入的方式：

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

這在Chrome上工作正常，默認情況下我會看到以下內容：

（我仍然不太明白為什么必須在yyyy-MM-dd給出值，如果Chrome仍然根據我的語言環境對其進行格式化，但這是一個不同的問題。）

我的問題是Firefox沒有以我指定的方式顯示日期的值。 我認為這與將輸入綁定到date模型有關，因為我可以在value屬性中指定幾乎任何字符串，並且我仍然會在輸入中看到默認的長日期字符串：

如果我從輸入標簽中刪除ng-model="date" ，Firefox會很好地顯示我給它的任何值。 我不認為輸入綁定的模型實際上對其默認值有任何影響？

我理解普遍不支持日期輸入，但看到它應該依賴於一個簡單的文本輸入，我不明白為什么它的值不會僅僅是2013-08-05 ，由angular的日期過濾器指定。

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

---

注意在用戶完成編輯后，我當然會執行驗證並將每個日期輸入值轉換為正確的Date對象。 不確定這是否與問題相關，而是將其放在那里以防萬一，因為輸入格式顯然需要保持一致，以便日期轉換在所有瀏覽器中都能正常工作。 當然有問題，Chrome決定我的輸入格式......

Answer 1

問題是當存在ng-model時忽略value 。

Firefox目前不支持type="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);
    });
}

小提琴

實際結構僅用於演示目的。 你最好創建自己的指令，尤其是為了：

• 允許yyyy-MM-dd以外的格式，
• 能夠使用NgModelController#$formatters和NgModelController#$parsers而不是dateString變量（請參閱有關此主題的文檔 ）。

請注意我使用了yyyy-MM-dd ，因為它是JavaScript Date對象直接支持的格式。 如果您想使用另一個，您必須自己進行轉換 。

---

編輯

這是一種制作干凈指令的方法：

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);
                });
            },
        };
});

小提琴

這是一個基本指令，仍有很大的改進空間，例如：

• 允許使用自定義格式而不是yyyy-MM-dd ，
• 檢查用戶輸入的日期是否正確。

Answer 2

為什么價值必須以yyyy-MM-dd給出？

根據HTML 5的輸入類型=日期規范 ，該值必須采用yyyy-MM-dd格式，因為它采用RFC3339中指定的有效full-date格式

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

與Angularjs無關，因為指令輸入不支持date類型。

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

FF不支持至少高達版本24.0的date輸入類型。 您可以從這里獲得此信息。 因此，就目前而言，如果您使用類型為FF的date輸入，則文本框將采用您傳入的任何值。

我的建議是你可以使用Angular-ui的Timepicker而不使用HTML5支持日期輸入。

Answer 3

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

<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>

Answer 4

就我而言，我已經解決了這個問題：

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

和輸入類型日期是好的

Answer 5

我用過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> 

Answer 6

檢查MEAN.JS的完整功能指令（Angular.js，bootstrap，Express.js和MongoDb）

基於@Blackhole的回復，我們剛剛完成它與mongodb和express一起使用。

它允許您從貓鼬連接器保存和加載日期

希望能幫助到你！！

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

      }
    };
  });

JADE / HTML：

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

Answer 7

如果使用Angular Material Design，您可以在那里使用datepicker組件，這將適用於Firefox，IE等。

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

雖然公平警告 - 個人經驗是這方面存在問題，而且目前似乎正在重新工作。 看這里：

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