输入 type="date" HTML5 for firefox with angular答案

【问题标题】：input type="date" HTML5 for firefox with angular输入 type="date" HTML5 for firefox with angular
【发布时间】：2017-06-09 02:35:53
【问题描述】：

我有 type="date" 的 HTML5 输入字段：

<div>
    Start Date
    <input id ="ui-datepicker-start" type="date" ng-model="startDate"
           ng-change="updateStartDate(startDate)" value="{{ date | date: 'yyyy/MM/dd' }}" />
    End Date
    <input id="ui-datepicker-end" type="date" ng-model="endDate"
           ng-change="updateEndDate(endDate)" value="{{ date | date: 'yyyy/MM/dd' }}" />
</div>

在 Firefox html5 中，日期选择器无法正常工作，它们只是 input type="text"。我为其他浏览器添加了代码（不支持 input type="date"）：

<script>
    if ($('[type="date"]').prop('type') != 'date') {
        $('[type="date"]').datepicker();
    }
</script>

现在当我运行应用程序时，我可以通过 jquery datepicker() 设置日期。但现在我有一个问题。当我更改“开始日期”和“结束日期”时，它们不会调用角度 ng-change 上的函数（ng-change="updateStartDate(startDate)" 和 ng-change="updateEndDate(endDate)"）。怎么做？如何在角度 ng-change 函数上绑定更改的输入日期？谢谢！！！

【问题讨论】：

你必须在初始化 datepicker @Hennadii Feshchuk 时绑定 change 函数。
怎么做才对？
在您的输入中添加onchange="angular.element(this).scope().updateEndDate(this)"，

标签： jquery angularjs html datepicker

【解决方案1】：

如此复杂的 UI 组件需要包装成指令来维护模型数据绑定

您可以使用角度指令jqdatepicker 而不是 Jquery datepicker 您可以使用Rscope.watch 获取新值 //html

<input type="date"  ng-model="startDate"  jqdatepicker />
<br/>
Old : {{startDate}}
<br/>
New : {{NewDate}}

//控制器

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

datePicker.controller('DatepickerController', ['$scope', function($scope) {
  $scope.startDate = new Date();
  $scope.$watch("startDate", function(newValue, oldValue) {  
  $scope.startDate=oldValue;
  $scope.NewDate=newValue;
});
}]);

// 指令

   datePicker.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'DD, d  MM, yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }
    };
});

Jsfiddler

【讨论】：