Question

我有HTML5输入字段，类型=“date”：

<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 datepickers无法正常工作时，它们只是输入类型=“文本”。我为其他浏览器添加了代码（不支持输入类型=“日期”）：

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

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

Answer 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

输入类型=“日期”HTML5 for firefox with angular

1 个答案: