PU$]-[KAR's

… Every drop has ability to survive .


4 Comments

Re selecting same date in datepicker … from boot strap.

Once again datepicker comes in to action …

Guys, one the key issues with ‘datepicker’ is re selecting the same date in bootstrap datepicker control. Let’s consider a scenario that user has already selected a date say 1st Aug. 2014 so of course that date will get highlighted and now by mistake is again selecting a same date, in that case date say 1st Aug. 2014 (which is already selected) will gets deselect. And of-course multi-date selecting is false. So this is very odd behavior of user some times (specially in case where selecting a same date is not a functionality to deselect it.)

You can see this issue on

click here

So to resolve this issue we need to understand how datepicker runs behind the seen i.e. ‘bootstrap-datepicker’ js file.

Below code is a snap shot from datepicker bootstrap.js file


_toggle_multidate: function(date){
var ix = this.dates.contains(date);
if (!date){
this.dates.clear();
}
else if (ix !== -1){
this.dates.remove(ix);
}
else {
this.dates.push(date);
}
if (typeof this.o.multidate === 'number')
while (this.dates.length > this.o.multidate)
this.dates.remove(0);},

Analysis of existing code:

As shown in above code variable ‘ix’ holds index number (from an array of selected dates i.e. ‘this.dates’) if it founds duplicate date and if ‘ix’ holds value other than -1 then it shows that the selected date is duplicate one i.e. it already has been selected. So it removes that date from an array ‘this.dates’ so it won’t be able to select i.e. highlight it on UI.
So this is the section that we need to look at.

Solution:

To avoid such problem we can create a property as ‘multidateRemoveDuplicate’ which will be deciding factor to select of deselect duplicate date because user come across scenarios such as
1. If user re select already selected date it should get deselect
2. The selected date gets deselect only in case when some different date is selected.
(of course multi date selection is blocked in both cases).

So if the value of ‘multidateRemoveDuplicate’ is set to true then it will removes already selected date and if it is false then it wont.

Modified code:

To create ‘multidateRemoveDuplicate’ property we need to add following code in bootstrap-datepicker.js file.

1. The following code will assign default value to ‘multidateRemoveDuplicate’ as false.

var defaults = $.fn.datepicker.defaults = {
autoclose: false,
beforeShowDay: $.noop,
calendarWeeks: false,
clearBtn: false,
daysOfWeekDisabled: [],
endDate: Infinity,
forceParse: true,
format: 'mm/dd/yyyy',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
multidate: false,
multidateRemoveDuplicate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0
};

2. The following code need to add along with other set properties which are already exist and it is to set a value to property ‘multidateRemoveDuplicate’ (setter method)

setMultidateRemoveDuplicate: function (multidateRemoveDuplicate) {
this._process_options({ multidateRemoveDuplicate: multidateRemoveDuplicate });
this.update();
this.updateNavArrows();
},

3. The following code is to  default call set property of ‘multidateRemoveDuplicate’ i.e. ‘setMultidateRemoveDuplicate’ with ther set properties which are already exist.

var Datepicker = function(element, options){
.
.
this.setStartDate(this._o.startDate);
this.setEndDate(this._o.endDate);
this.setDaysOfWeekDisabled(this.o.daysOfWeekDisabled);
this.setMultidateRemoveDuplicate(this.o.multidateRemoveDuplicate);
this.fillDow();
this.fillMonths(); ...

Now we have to modify a code for _toggle_multidate function as given below.
The date will get removed from an array of dates based on the value assigned to ‘multidateRemoveDuplicate’

_toggle_multidate: function(date){
var ix = this.dates.contains(date);
if (!date){
this.dates.clear();
}
else if (ix !== -1){ if (this.o.multidateRemoveDuplicate) {
this.dates.remove(ix);} }
else {this.dates.push(date);}
if (typeof this.o.multidate === 'number')
while (this.dates.length > this.o.multidate)
this.dates.remove(0);},

And we can assign a value from our code based on the user requirement weather user re select already selected date it should get deselect or the selected date gets deselect only in case when some different date is selected.

That’s all my friends. Have a nice day!!! ….

🙂

Advertisements