Now I am trying to do something after user change the date. But seems like my ng-change
is ignored.
Here is my code sample:
<input ng-change='changedate()'
type="text"
starting-day="2"
show-button-bar="false"
show-weeks="false"
class="form-control addTicketDateInput"
datepicker-popup="dd MMM"
ng-model="startdate"
is-open="openstart"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close" />
In my controller:
$scope.changedate=function(){
console.log($scope.startdate);
}
Any idea?
To set current date in control to which jQuery UI datepicker bind, use setDate() method. Pass date object which needs to be set as an argument to setDate() method. If you want to set it to current date then you can pass 'today' as argument.
You can check to see if the datepicker script has loaded using: if ($. fn. datepicker) { // ... }
Because you're defining the code in the head the body and its contents haven't been loaded yet; so the selector finds no elements to initialize datepicker. If you don't want to use document. ready functionality you could also move the script to the end of the body tag.
You could keep an eye on when the $scope
changed.
Something like this:
$scope.startdate;
$scope.$watch("startdate", function(newValue, oldValue) {
console.log("I've changed : ", startdate);
});
Simple solution: Try passing the value:
HTML
ng-change="selectDate(dt)"
JavaScript
$scope.selectDate = function(dt) {
console.log(dt);
}
The way I've done this before is to wrap the datepicker jQuery stuff in an angular directive. This is rough but here's the idea:
app.directive('dateDirective', function() {
return {
restrict: 'A',
scope: {
onChange: '&'
},
link: function(scope, element, attrs) {
element.datetimepicker({
format: "MM-yyyy"
//all your options here
}).on('changeDate', function(e) {
scope.$apply(function(scope) {
scope.onChange(e.date);
});
});
}
};
});
You can capture the change event from the jQuery element and use it to call a function in your controller, or just use it to set scope values or whatever:
var app = angular.module('myApp', []);
app.controller('myAppCtrl', function($scope) {
$scope.current = '';
$scope.changedate = function(date){
$scope.current = date;
};
});
Then you just need to add the directive to your dom element:
<input date-directive
type="text"
starting-day="2"
show-button-bar="false"
show-weeks="false"
class="form-control addTicketDateInput"
datepicker-popup="dd MMM"
ng-model="startdate"
is-open="openstart"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close" />
Then tell it which scope function to call:
<input date-directive onChange='changedate(date)'
type="text"
starting-day="2"
show-button-bar="false"
show-weeks="false"
class="form-control addTicketDateInput"
datepicker-popup="dd MMM"
ng-model="startdate"
is-open="openstart"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close" />
Like I said this is rough just recalled it quickly. If this doesn't help I'll dig out a sample that is tested.
Hope that helps!
also, there's a datepicker directive here that might be halpful:
https://angular-ui.github.io/bootstrap/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With