input type = "date" HTML5 für firefox mit Winkel

Question

Ich habe HTML5 Eingabefelder mit type = "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> 

In Firefox html5 Kalenderwerkzeug nicht richtig funktionieren, sind sie input type = "text " nur. Ich habe Code für andere Browser (die nicht Eingabetyp unterstützt werden = "date"):

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

Wenn ich jetzt app laufen, kann ich von Jquery Datepicker Set date(). Aber jetzt habe ich ein Problem. Wenn ich "Startdatum" und "Enddatum" ändere, rufen sie nicht die Funktionen angular ng-change auf (ng-change = "updateStartDate (startDate)" und ng-change = "updateEndDate (endDate)"). Wie es geht? Wie man wechselnde Eingabedaten an angular ng-change Funktionen bindet? Danke !!!

Answer 1

Derart komplexe UI-Komponenten müssen in eine Richtlinie eingewickelt werden, um ein Modelldaten erhalten

Bindung Mit Winkel Richtlinie gehen jqdatepicker statt JQuery Datepicker und Sie können den neuen Wert erhalten, indem Sie Rscope.watch // html

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

// Controller

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

// Richtlinie

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