Such complex UI components need to be wrapped into a directive to maintain a model data binding. For the jQuery datepicker, you can check this question, or google around "jquery datepicker directive".
Jquery datepicker selected date is not considered in ng-change - AngularJS
-
15-06-2023 - |
Pergunta
Kindly help me to solve this issue. I am using jquery datepicker with AngularJS. I am trying to get the selected date and pass it with a function as parameter. For this I am using the following code.
Html:
<input type="text" "ng-model="gettingStartDate" ng-change="newTest(gettingStartDate)" />
Date Picker:
$( "#date1" ).datepicker();
AngularJS:
function getOrg($scope, $http) {
$scope.newTest = function(start_date){
alert(start_date);
};
}
Solução
Outras dicas
<input type="text" id="date1" datepicker1 ng-model="gettingStartDate" />
var app = angular.module('reports', [])
.directive("datepicker1", function () {
return {
restrict: "A",
link: function ($scope, $element, $attr, $controller) {
$element.datepicker({
changeMonth: false,
showOtherMonths: true,
numberOfMonths: 2,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
onSelect: function (date) {
$scope.gettingStartDate = date;
$scope.$apply();
$scope.fromDateSend(date); // function call
},
onClose: function (selectedDate) {
$("#date2").datepicker("option", "minDate", selectedDate);
}
});
}
};
});
You should change the entire approach. Using jQueryUI datepicker directive:
angular
.module('App',['ui.date'])
.directive('customDatepicker',function($compile){
return {
replace:true,
templateUrl:'custom-datepicker.html',
scope: {
ngModel: '=',
dateOptions: '='
},
link: function($scope, $element, $attrs, $controller){
var $button = $element.find('button');
var $input = $element.find('input');
$button.on('click',function(){
if($input.is(':focus')){
$input.trigger('blur');
} else {
$input.trigger('focus');
}
});
}
};
})
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow