el codigo jquery.calendarPicker.js
Código PHP:
jQuery.fn.calendarPicker = function(options) {
// -------------------------- start default option values --------------------------
if (!options.date) {
options.date = new Date();
}
if (typeof(options.years) == "undefined")
options.years=0;
if (typeof(options.months) == "undefined")
options.months=3;
if (typeof(options.days) == "undefined")
options.days=4;
if (typeof(options.showDayArrows) == "undefined")
options.showDayArrows=true;
if (typeof(options.useWheel) == "undefined")
options.useWheel=true;
if (typeof(options.callbackDelay) == "undefined")
options.callbackDelay=500;
if (typeof(options.monthNames) == "undefined")
options.monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
if (typeof(options.dayNames) == "undefined")
options.dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
// -------------------------- end default option values --------------------------
var calendar = {currentDate: options.date};
calendar.options = options;
//build the calendar on the first element in the set of matched elements.
var theDiv = this.eq(0);//$(this);
theDiv.addClass("calBox");
//empty the div
theDiv.empty();
var divYears = $("<div>").addClass("calYear");
var divMonths = $("<div>").addClass("calMonth");
var divDays = $("<div>").addClass("calDay");
theDiv.append(divYears).append(divMonths).append(divDays);
calendar.changeDate = function(date) {
calendar.currentDate = date;
var fillYears = function(date) {
var year = date.getFullYear();
var t = new Date();
divYears.empty();
var nc = options.years*2+1;
var w = parseInt((theDiv.width()-4-(nc)*4)/nc)+"px";
for (var i = year - options.years; i <= year + options.years; i++) {
var d = new Date(date);
d.setFullYear(i);
var span = $("<span2>").addClass("calElement").attr("millis", d.getTime()).html(i).css("width",w);
if (d.getYear() == t.getYear())
span.addClass("today");
if (d.getYear() == calendar.currentDate.getYear())
span.addClass("selected2");
divYears.append(span);
}
}
var fillMonths = function(date) {
var month = date.getMonth();
var t = new Date();
divMonths.empty();
var oldday = date.getDay();
var nc = options.months*2+1;
var w = parseInt((theDiv.width()-4-(nc)*4)/nc)+"px";
for (var i = -options.months; i <= options.months; i++) {
var d = new Date(date);
var oldday = d.getDate();
d.setMonth(month + i);
if (d.getDate() != oldday) {
d.setMonth(d.getMonth() - 1);
d.setDate(28);
}
var span = $("<span>").addClass("calElement").attr("millis", d.getTime()).html(options.monthNames[d.getMonth()]).css("width",w);
if (d.getYear() == t.getYear() && d.getMonth() == t.getMonth())
span.addClass("today");
if (d.getYear() == calendar.currentDate.getYear() && d.getMonth() == calendar.currentDate.getMonth())
span.addClass("selected");
divMonths.append(span);
}
}
var fillDays = function(date) {
var day = date.getDate();
var t = new Date();
divDays.empty();
var nc = options.days*2+1;
var w = parseInt((theDiv.width()-4-(options.showDayArrows?12:0)-(nc)*4)/(nc-(options.showDayArrows?2:0)))+"px";
for (var i = -options.days; i <= options.days; i++) {
var d = new Date(date);
d.setDate(day + i)
var span = $("<span>").addClass("calElement").attr("millis", d.getTime())
if (i == -options.days && options.showDayArrows) {
span.addClass("prev");
} else if (i == options.days && options.showDayArrows) {
span.addClass("next");
} else {
span.html("<span class=dayNumber>" + d.getDate() + "</span><br>" + options.dayNames[d.getDay()]).css("width",w);
if (d.getYear() == t.getYear() && d.getMonth() == t.getMonth() && d.getDate() == t.getDate())
span.addClass("today");
if (d.getYear() == calendar.currentDate.getYear() && d.getMonth() == calendar.currentDate.getMonth() && d.getDate() == calendar.currentDate.getDate())
span.addClass("selected");
}
divDays.append(span);
}
}
var deferredCallBack = function() {
if (typeof(options.callback) == "function") {
if (calendar.timer)
clearTimeout(calendar.timer);
calendar.timer = setTimeout(function() {
options.callback(calendar);
}, options.callbackDelay);
}
}
fillYears(date);
fillMonths(date);
fillDays(date);
deferredCallBack();
}
theDiv.click(function(ev) {
var el = $(ev.target).closest(".calElement");
if (el.hasClass("calElement")) {
calendar.changeDate(new Date(parseInt(el.attr("millis"))));
}
});
//if mousewheel
if ($.event.special.mousewheel && options.useWheel) {
divYears.mousewheel(function(event, delta) {
var d = new Date(calendar.currentDate.getTime());
d.setFullYear(d.getFullYear() + delta);
calendar.changeDate(d);
return false;
});
divMonths.mousewheel(function(event, delta) {
var d = new Date(calendar.currentDate.getTime());
d.setMonth(d.getMonth() + delta);
calendar.changeDate(d);
return false;
});
divDays.mousewheel(function(event, delta) {
var d = new Date(calendar.currentDate.getTime());
d.setDate(d.getDate() + delta);
calendar.changeDate(d);
return false;
});
}
calendar.changeDate(options.date);
return calendar;
};
y por ultimo el codigo jquery.mousewheel.js
Código PHP:
/*! Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
*
* Version: 3.0.2
*
* Requires: 1.2.2+
*/
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener )
for ( var i=types.length; i; )
this.addEventListener( types[--i], handler, false );
else
this.onmousewheel = handler;
},
teardown: function() {
if ( this.removeEventListener )
for ( var i=types.length; i; )
this.removeEventListener( types[--i], handler, false );
else
this.onmousewheel = null;
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
event = $.event.fix(event || window.event);
event.type = "mousewheel";
if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;
// Add events and delta to the front of the arguments
args.unshift(event, delta);
return $.event.handle.apply(this, args);
}
})(jQuery);
Ahora lo que necesito es que cuando se de clic en alguna fecha en lugar de que la fecha aparezca en el <span id="wtf"></span> se vaya a una pagina (pagina.php?date=dd-mm-yyyy) con la fecha seleccionada en el formato dd-mm-yyyy OJALA Y ME PUEDAN AYUDAR MUCHAS GRACIAS!!!!!