Dude, your code is really what I needed!
And with Jamie Layne's correction, I decided to use it to make a plugin.
Here is the link for jsfiddle: http://jsfiddle.net/dxLRm/35/ (link updated 2014/01/01)
Since I have to show some code, here is what I have:
(function ($) {
$.prototype.rangedatepicker = function (o,x,y) {
var dp = $.datepicker,
cl = dp.markerClassName,
di = 'data-rdp-i',
df = 'data-rdp-f';
switch(o)
{
case 'option':
return $(this).datepicker('option');
case 'hide':
return $(this).datepicker('hide');
case 'show':
return $(this).datepicker('show');
case 'getInitialDate':
return dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(di)||'');
case 'getFinalDate':
return dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(df)||'');
case 'getRange':
var ini=dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(di)||''),
fin=dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(df)||'');
return (!ini&&!fin)?null:[ini,fin];
case 'getNumDays':
var ini=dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(di)||''),
fin=dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(df)||'');
return (ini+0==0||fin+0==0)?0:Math.round((fin-ini)/86400000)+1;
case 'removeRange':
return $(this).attr(di,'').attr(df,'').datepicker('setDate',null);
case 'destroy':
return $(this).removeAttr(di).removeAttr(df).datepicker('destroy');
case 'serialize':
return this[0].id+'_initial='+this[0].getAttribute(di)+'&'+this[0].id+'_final='+this[0].getAttribute(df);
default:
var defaults={
allowSelectOneDay: false,
alwaysSetDateToFirstDay: true,
rangeEnabled: true,
rangeClass: 'ui-state-default ui-state-active'//'dp-highlight'
};
o = $.extend({}, defaults, $.datepicker._defaults, o);
return $(this).each(function () {
if (!$.datepicker) return;
var t = this,
hd = !! ((' ' + t.className + ' ').indexOf(' ' + cl + ' ') + 1);
$(t).datepicker($.extend({}, o, {
beforeShowDay: function (d) {
if (o.rangeEnabled) {
var d1 = dp.parseDate(o.dateFormat, t.getAttribute(di) || ''),
d2 = dp.parseDate(o.dateFormat, t.getAttribute(df) || ''),
y = (function (d) {
try {
return o.beforeShowDay.call(t, d);
} catch (e) {}
})(d) || [true, '', null],
x = ((y && y[0] !== false) || !y) && d1 && ((d.getTime() == d1.getTime()) || (d2 && d >= d1 && d <= d2));
return (!d1||!d2)?y||[true,'',null]:[y[0]&&x, (x ? o.rangeClass || defaults.rangeClass : '') + (y[1] ? ' ' + y[1] : ''), y[2]];
} else {
return (function (d) {
try {
return o.beforeShowDay.call(t, d);
} catch (e) {}
})(d) || [true, '', null];
}
},
onSelect: function (dt, x) {
if (o.rangeEnabled) {
var i = t.getAttribute(di) || '',
f = t.getAttribute(df) || '',
d1 = dp.parseDate(o.dateFormat, i),
d2 = dp.parseDate(o.dateFormat, f),
s = dp.parseDate(o.dateFormat, dt);
if ((dt == i && dt == f) || (!o.allowSelectOneDay && ((dt == i && !f) || (dt == f && !i)))) {
t.removeAttribute(di);
t.removeAttribute(df);
$(t).datepicker('setDate', null);
} else if (!d1 || d2) {
t.setAttribute(di, dt);
t.removeAttribute(df);
o.alwaysSetDateToFirstDay && $(t).datepicker('setDate', s);
} else if (s < d1) {
t.setAttribute(df, i);
t.setAttribute(di, dt);
o.alwaysSetDateToFirstDay && $(t).datepicker('setDate', s);
} else {
t.setAttribute(df, dt);
o.alwaysSetDateToFirstDay && $(t).datepicker('setDate', d1);
}
} else {
t.removeAttribute(di);
t.removeAttribute(df);
$(t).datepicker('setDate', dp.parseDate(o.dateFormat, dt));
}
try {
if($(t).datepicker('getDate'))o.onSelect.call(t, dt, x);
} catch (e) {}
}
}));
});
}
};
})(window.jQuery);
You should access the fiddle and read the list of things to do!
Any idea or piece of code is appreciated!
