With the below code, my datepicker is always open and I don't see the input area:
HTML:
<td ng-controller="notificationModalController">
<span><strong>End Date</strong></span>
<input type="text" name="notification.text" ng-model="notification.text" datepicker="">
</td>
JS:
app.directive('datepicker', function () {
return {
require: 'ngModel',
link: function (scope, el, attr, ngModel) {
$(el).datepicker({
autoclose:true,
onSelect: function (dateText) {
scope.$apply(function () {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
I'm using this theme in case it matters:
http://wrapbootstrap.com/preview/WB0T41TX4
Why would the datepicker always be open? I'd like for it to behave like the one in the theme sample but this is the closest I've gotten:
The bootstraper datepicker dont provide the method onSelect. Try something like this instead:
el.datepicker({
startDate: new Date(),
format: 'dd.mm.yyyy',
autoclose: true
}).on('changeDate', function (e) {
someVar = e.date;
});
Related
I am new to Angularjs. I have put 2 Datepickers. I need that When I select date from first datepicker then the smaller dates from that date should be disabled in second Datepicker. I am unable to set "minDate" for second Datepicker directive.
Below is my code :
HTML Code :
<div ng-controller='TestController'>
<label>From Date :</label>
<input type="text" id="1" datepicker="" ng-init="variable=''"
ng-model="startDate" ng-change="test()" />
<label>To Date :</label>
<input type="text" id="2" callFuc="test()" datepicker1=""
ng-model="endDate" />
</div>
Js Code:
app.controller('TestController', function($scope, $window) {
$scope.test = function() {
$scope.variable = $scope.startDate;
$window.alert("From date is" + $scope.variable);
};
});
app.directive('datepicker', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ngModel) {
$('#1').datepicker({
minDate: 0,
onSelect: function(dateText) {
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
app.directive('datepicker1', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ngModel) {
$('#2').datepicker({
minDate: scope.test(),
onSelect: function(dateText) {
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
I am able to disable past dates in first Datepicker using minDate : "0".
But I am unable to set minDate properly for the second Datepicker. I am not able to fetch selected date from the First Datepicker and pass it to "datepicker1" directive. Any help or suggestion will be appreciated.
Update
I have updated code. Kindly review it.
https://plnkr.co/edit/ohCFzpwLGgFPPH49jybq?p=preview
The datepicker directive needs to watch for changes and update minDate as needed:
app.directive('datepicker1', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ngModel) {
scope.$watch(attr.minDate, function(value) {
el.datepicker({
minDate: value,
onSelect: function(dateText) {
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
});
}
};
});
Usage:
<label>To Date :</label>
<input type="text" min-date="variable" datepicker1
ng-model="endDate" />
I have a custom directive for applying jQuery UI Datepicker to some inputs. I can pick a date and it updates the input. However, when i post back the results. The input(control) that was edited isn't marked dirty so the changes never get saved. See below..
<td>
<input type="text" jqdatepicker name="Delegation.StartDate" ng-model="delegation.StartDate" />
</td>
<td>
<input type="text" jqdatepicker name="Delegation.EndDate" ng-model="delegation.EndDate" />
</td>
App.directive('jqdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'm/dd/yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
ngModelCtrl.$setDirty(); <--doesn't work
}
});
}
};});
I have tried using scope, element, ngModel and can't get the state of the control to change from pristine to dirty. On save, i scrap the rows(tr) for those that have the class ng-dirty and process them. Any thoughts on how to do this? I use the same method on about 8 other pages without issue but those do not use the directive/datepickers.
After lots of trial and error and reading. I finally got it to work! Below is the directive.
App.directive('jqdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'm/dd/yy',
onSelect: function (date) {
console.log(ngModelCtrl);
ngModelCtrl.$setViewValue(date);
}
});
}
};
});
Datepicker in my application is working fine but i am not able to change year directly. I have to go month by month to change year
Directive for datepicker
app.directive('adatepicker', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ngModel) {
$(el).datepicker({
onSelect: function(dateText) {
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
In HTML page
<input type="text" adatepicker="" ng-model="Date"/>
screenshot of datepicker
From the documentation, initialize the datepicker with the changeYear option specified:
$( ".selector" ).datepicker({
changeYear: true
});
Get or set the changeYear option, after initialization:
// Getter
var changeYear = $( ".selector" ).datepicker( "option", "changeYear" );
// Setter
$( ".selector" ).datepicker( "option", "changeYear", true );
I am using ui-date in AngularJS.
<input name="dateofbirth" id="dateofbirth" type="text" ng-model="search.dateofbirth" ui-date="dateOptions" ui-date-format="mm/dd/yy">
When I click on the textbox, a calendar pops up, but the user cannot type in the textbox.
How can I make this textbox editable?
You can use this directive, when you click on the text field calendar should be shown.. Here is the working fiddle
http://jsfiddle.net/nabeezy/HB7LU/209/
myApp.directive('calendar', function () {
return {
require: 'ngModel',
link: function (scope, el, attr, ngModel) {
$(el).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (dateText) {
scope.$apply(function () {
ngModel.$setViewValue(dateText);
});
}
});
}
};
})
I'm using a jQuery-ui datapicker and have defined a directive (credit: http://www.abequar.net/posts/jquery-ui-datepicker-with-angularjs) to instantiate it. I'd now like to add an html attribute that defines the function to call to determine whether a day should be selectable in the datepicker. How would I do this?
The js:
//Directive for showing the jquery-ui datepicker
myApp.directive('datepicker', function() {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ngModelCtrl) {
$j(function(){
//Instantiate the datepicker
element.datepicker({
dateFormat:'dd/mm/yy',
beforeShowDay:function(date) {
//TODO Call function defined in attrs, passing the date object to it
theDefinedFunction(date)
},
onSelect:function (date) {
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
});
});
}
}
});
The html:
<input type="text" datepicker show-days="myShowDaysFunction()" />
The myShowDaysFunction() would be defined in the controller.
(Edit) - Controller function:
$scope.myShowDaysFunction = function(date) {
console.log("I get called"); //Logs to the console
console.log(date); //Logs undefined to the console
}
Thanks.
You need to create an isolate scope on your directive and take the function as a scope variable.
myApp.directive('datepicker', function() {
return {
restrict: 'A',
require : 'ngModel',
scope: {
showDays: '&'
},
link : function (scope, element, attrs, ngModelCtrl) {
$j(function(){
//Instantiate the datepicker
element.datepicker({
dateFormat:'dd/mm/yy',
beforeShowDay:function(date) {
//TODO Call function defined in attrs, passing the date object to it
scope.showDays({date: date});
},
onSelect:function (date) {
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
});
});
}
}
});
Markup
<input type="text" datepicker show-days="myShowDaysFunction(date)" />
Controller Function
$scope.myShowDaysFunction = function(date) {
alert(date);
}
Plunker Exmaple
http://plnkr.co/edit/kRc76icPUa9qTkPH4UKm?p=preview