How can I change buttonImage dynamically for one instance?
We create multiple instances of datepicker when you select a specific date from one datepicker, at a time when we need to change the buttonImage of that datepicker instance, not all.
See below code
$('.FixedDates').datepicker({
showOn: "button",
buttonImage: "images/HM-Cal-Icon.png",
buttonImageOnly: true
});
$('.AddDate').click(function () {
$('.HMDatePicker').append('<br><input type="text" class="FixedDates">');
$('.FixedDates').datepicker({
showOn: "button",
buttonImage: "images/HM-Cal-Icon.png",
buttonImageOnly: true
});
});
How to change buttonImage of current datepicker instead of multiple instances of datepicker
as
$('.FixedDates').datepicker("option", "buttonImage", 'CalendarBlank.jpg');
above code will change buttonImage for all datepickers instances. I want to change the current instance of the datepickerImage button that was actually clicked.
Please find below fiddle link .. http://jsfiddle.net/KN4az/1/
source to share
You can change the icon in the callback onSelect
so only the image for the selected selected datepicker is changed when the date is selected.
Also there is a callback onClose
when the datepicker is closed, if that's more appropriate
var settings = {
showOn : "button",
buttonImage : "images/HM-Cal-Icon.png",
buttonImageOnly : true,
onSelect : function() {
$(this).datepicker("option", "buttonImage", 'CalendarBlank.jpg');
}
}
$('.FixedDates').datepicker(settings);
$('.AddDate').click(function () {
$('.HMDatePicker').append('<br><input type="text" class="FixedDates">');
$('.FixedDates').datepicker(settings);
});
To just change the options for one datepicker at any time, you will target it with something unique, like an index that can be done with eq()
, which is null based, so below will change the icon for the second datepicker with this class
$('.FixedDates').eq(1).datepicker("option", "buttonImage", 'CalendarBlank.jpg');
source to share