JavaScript - Jquery Datepicker Date Range Problem.

I have been using the following script for some time and it has only just been made known to me that it fails on todays date ! not sure if this is the case for other days but the days of the week are all messed up and do not show correctly for a date in June 2011.


Code:

var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();

// Get Element By Id
function ds_getel(id) {
	return document.getElementById(id);
}

// Get the left and the top of the element.
function ds_getleft(el) {
	var tmp = el.offsetLeft;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetLeft;
		el = el.offsetParent;
	}
	return tmp;
}
function ds_gettop(el) {
	var tmp = el.offsetTop;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetTop;
		el = el.offsetParent;
	}
	return tmp;
}

// Output Element
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');

// Output Buffering
var ds_ob = ''; 
function ds_ob_clean() {
	ds_ob = '';
}
function ds_ob_flush() {
	ds_oe.innerHTML = ds_ob;
	ds_ob_clean();
}
function ds_echo(t) {
	ds_ob += t;
}

var ds_element; // Text Element...

var ds_monthnames = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
]; // You can translate it for your language.

var ds_daynames = [
'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
]; // You can translate it for your language.

// Calendar template
function ds_template_main_above(t) {
	return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
	     + '<tr>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_py();">&lt;&lt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();">&lt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Close]</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">&gt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">&gt;&gt;</td>'
		 + '</tr>'
	     + '<tr>'
		 + '<td colspan="7" class="ds_head">' + t + '</td>'
		 + '</tr>'
		 + '<tr>';
}

function ds_template_day_row(t) {
	return '<td class="ds_subhead">' + t + '</td>';
	// Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
}

function ds_template_new_week() {
	return '</tr><tr>';
}

function ds_template_blank_cell(colspan) {
	return '<td colspan="' + colspan + '"></td>'
}

function ds_template_day(d, m, y) {
	return '<td class="ds_cell" onMouseout="this.style.background=\'#EEE\';" onMouseover="this.style.background=\'#999\';" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
	// Define width the day row.
}

function ds_template_main_below() {
	return '</tr>'
	     + '</table>';
}

// This one draws calendar...
function ds_draw_calendar(m, y) {
	// First clean the output buffer.
	ds_ob_clean();
	// Here we go, do the header
	ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
	for (i = 0; i < 7; i ++) {
		ds_echo (ds_template_day_row(ds_daynames[i]));
	}
	// Make a date object.
	var ds_dc_date = new Date();
	ds_dc_date.setMonth(m - 1);
	ds_dc_date.setFullYear(y);
	ds_dc_date.setDate(1);
	if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
		days = 31;
	} else if (m == 4 || m == 6 || m == 9 || m == 11) {
		days = 30;
	} else {
		days = (y % 4 == 0) ? 29 : 28;
	}
	var first_day = ds_dc_date.getDay();
	var first_loop = 1;
	// Start the first week
	ds_echo (ds_template_new_week());
	// If sunday is not the first day of the month, make a blank cell...
	if (first_day != 0) {
		ds_echo (ds_template_blank_cell(first_day));
	}
	var j = first_day;
	for (i = 0; i < days; i ++) {
		// Today is sunday, make a new week.
		// If this sunday is the first day of the month,
		// we've made a new row for you already.
		if (j == 0 && !first_loop) {
			// New week!!
			ds_echo (ds_template_new_week());
		}
		// Make a row of that day!
		ds_echo (ds_template_day(i + 1, m, y));
		// This is not first loop anymore...
		first_loop = 0;
		// What is the next day?
		j ++;
		j %= 7;
	}
	// Do the footer
	ds_echo (ds_template_main_below());
	// And let's display..
	ds_ob_flush();
	// Scroll it into view.
	//ds_ce.scrollIntoView();
}

// A function to show the calendar.
// When user click on the date, it will set the content of t.
function ds_sh(t) {
	// Set the element to set...
	ds_element = t;
	// Make a new date, and set the current month and year.
	var ds_sh_date = new Date();
	ds_c_month = ds_sh_date.getMonth() + 1;
	ds_c_year = ds_sh_date.getFullYear();
	// Draw the calendar
	ds_draw_calendar(ds_c_month, ds_c_year);
	// To change the position properly, we must show it first.
	ds_ce.style.display = '';
	// Move the calendar container!
	the_left = ds_getleft(t);
	the_top = ds_gettop(t) + t.offsetHeight;
	ds_ce.style.left = the_left + 'px';
	ds_ce.style.top = the_top + 'px';
	// Scroll it into view.
	//ds_ce.scrollIntoView();
}

// Hide the calendar.
function ds_hi() {
	ds_ce.style.display = 'none';
}

// Moves to the next month...
function ds_nm() {
	// Increase the current month.
	ds_c_month ++;
	// We have passed December, let's go to the next year.
	// Increase the current year, and set the current month to January.
	if (ds_c_month > 12) {
		ds_c_month = 1; 
		ds_c_year++;
	}
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the previous month...
function ds_pm() {
	ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
	// We have passed January, let's go back to the previous year.
	// Decrease the current year, and set the current month to December.
	if (ds_c_month < 1) {
		ds_c_month = 12; 
		ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
	}
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the next year...
function ds_ny() {
	// Increase the current year.
	ds_c_year++;
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the previous year...
function ds_py() {
	// Decrease the current year.
	ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Format the date to output.
function ds_format_date(d, m, y) {
	// 2 digits month.
	m2 = '00' + m;
	m2 = m2.substr(m2.length - 2);
	// 2 digits day.
	d2 = '00' + d;
	d2 = d2.substr(d2.length - 2);
	// YYYY-MM-DD
	return d2 + '-' + m2 + '-' + y;
}

// When the user clicks the day.
function ds_onclick(d, m, y) {
	// Hide the calendar.
	ds_hi();
	// Set the value of it, if we can.
	if (typeof(ds_element.value) != 'undefined') {
		ds_element.value = ds_format_date(d, m, y);

				// this part is a personal bit of code to allow my page to update correctly and in time.
				if("fireEvent" in ds_element)
					ds_element.fireEvent("onChange");
				else
				{
					var evt = document.createEvent("HTMLEvents");
					evt.initEvent("change", false, true);
					ds_element.dispatchEvent(evt);
				}
				//

	// Maybe we want to set the HTML in it.
	} else if (typeof(ds_element.innerHTML) != 'undefined') {
		ds_element.innerHTML = ds_format_date(d, m, y);
	// I don't know how should we display it, just alert it to user.
	} else {
		alert (ds_format_date(d, m, y));
	}
}

I want to validate two a date range using javascript, so that my program would check startdate less than end date.

The below function only check the year, and it works.





Code:

function validate()
{

var start=document.entry.datum1.value;
year = start.substr(0, 4);
month = start.substr(5, 2);
dayval = start.substr(8, 2);

var end=document.entry.datum2.value;
year1 = end.substr(0, 4);
month1 = end.substr(5, 2);
dayval1 = end.substr(8, 2);


var myDate=new Date();
myDate.setFullYear(year,month,dayval);
var today = new Date();
today.setFullYear(year1,month1,dayval1);

if (myDate> today)
  {
  alert("The start date must come before the end date");
  return false
  }

return true;
}

But I have write a function for checking the whole date value and it didnt work.
My date is in format-
2008-10-23(yyyy-mm-dd)

Code:

function validate()
{
var start=entry.datum1.value;
year = start.substr(0, 4);
month = start.substr(5, 2);
dayval = start.substr(8, 2);

intyear = parseInt(year, 10);
intmonth = parseInt(month, 10);
intdayval = parseInt(dayval, 10);

var end=entry.datum2.value;
year1 = end.substr(0, 4);
month1 = end.substr(5, 2);
dayval1 = end.substr(8, 2);

intyear1 = parseInt(year1, 10);
intmonth1 = parseInt(month1, 10);
intdayval1 = parseInt(dayval1, 10);

var startDate = Date.parse(intyear,intdayval,intmonth);
   var endDate = Date.parse(intyear1,intdayval1,intmonth1);

if (startDate > endDate)
  {
  alert("The start date must come before the end date");
  return false;
  }
return true;

}

Please help

Hi Guys,

I am creating a 12 months events calendar and need javascript to compare a date range and apply a corresponding image banner once to the earliest instance of a particular date range eg:
I want to have a banner image for the earliest date in the January to May date range and same for June to December (seperate image). The event dates get generated via a CMS using {event_start_date format="%F %j%S , %Y"}

[APPLY JANUARY - MAY BANNER IMAGE] eg jm.jpeg
January 3rd, 2011 Event 1
January 23, 2011 Event 2
Feb 24th,2011 Event 3
March 21st, 2011 Event 4

[APPLY JUNE - DEC BANNER IMAGE] eg jd.jpeg
JUNE 30th, 2011 Event 5
September 12th, 2011 Event 6


[APPLY JANUARY - MAY BANNER IMAGE] eg jm.jpeg
January 1st, 2012 Event 7

THANKS!!!!!!!!!!

Hello,
First I would like to say I am not a coder.
I would like to have a specific date range in years entered into a text box and if anything else is entered a pop up alert would appear. The date range would be from 1912 to 2002. Any help with this would be greatly appreciated.

I am using Joomla 2.5 and a form constructor called RS Form Pro That allows JS to be used.

This is the Javascript I am trying to use:

Code:

<script type="text/javascript">
function checkDate(theForm) 
year=document.getElementById('YearBorn').value;
if(year<1912 || year>2002)
{
  alert("registration is restricted to those born between 1912 to 2002");
  return false;
  else {
  return true;
}
}
</script>

This is how I am trying to call it

Code:

onblur="return checkDate(this);"

I am not sure if I am calling it correctly or if the JS code is even correct. When the user enters the date and it is not within the date range I need the alert to pop up.

Thank you for any help you can provide

DeZiner

I'm wanting to put a piece of code on my website that will display when our next meeting will be. We have 2 meetings per month. I'm thinking what I need to do is create a code that gets the current month, day of month, and year then combines it together somehow, and if that combination is in a certain range a particular statement, "Next meeting is MM, DD YY." or "Next meeting is today." is displayed.

If date is equal to or between 01012012 and 01112012, "Next meeting is January, 12 2012" is displayed.
If date is equal to 01122012, "Next meeting is today" is displayed.
If date is equal to or between 01132012 and 01252012, "Next meeting is January, 26 2012" is displayed.
If date is equal to 01262012, "Next meeting is today" is displayed.
...that kind of thing.

How would I combine the month, day of month, and year?
Would 48 if statements be what I need to do?

Sorry, I'm pretty new to javascript. If there's a better way to do this, please let me know.

Thanks,

CJ

I'm working with datepickers to select a date range for my travel site (so they are a departure date and a return date). There are two datepickers and I can't get the min date on the first calendar set to today, and I also can't figure out how to get the date fields to clear if the user clicks the browsers refresh button - please help!

Here's the javascript code I'm currently trying to run:
$(function() {
var dates = $("#datepicker1, #datepicker2").datepicker({
defaultDate: '',
minDate: '+0m +0w +0d', // this isn't working to set the earliest selectable date to today
maxDate: '+0m +0w +365d', // but oddly enough this one works to make sure users can't select a date farther than a year out
numberOfMonths: 2,
beforeShow: function() {
var other = this.id == "from" ? "#datepicker2" : "#datepicker1";
var option = this.id == "from" ? "maxDate" : "minDate";
var selectedDate = $(other).datepicker('getDate');

$(this).datepicker("option", option, selectedDate);
}
}).change(function(){
var other = this.id == "from" ? "#datepicker2" : "#datepicker1";
if($('#datepicker1').datepicker('getDate') > $('#datepicker2').datepicker('getDate'))
$(other).datepicker('setDate', $(this).datepicker('getDate'));
});
});

// this is the function I wrote to try to clear the fields when browser refresh is clicked but it doesn't do anything
function clearInp() {
document.getElementById('datepicker1').value = "";
document.getElementById('datepicker2').value = "";
}


Here's the corresponding HTML code:
<form method="POST" name="myForm2" class="calendars">
<input id="datepicker1" type="text" name="departure_date" class="dates" size="15" maxlength="25" />
to
<input id="datepicker2" type="text" name="return_date" class="dates" size="15" maxlength="25" />
</form>

Thanks in advance!

I am trying to extend my plug in by restricting the sunday from the calendar. I am not sure how to do this with my existing code.

here is the code which is currently not working:

<script type="text/javascript">
$(function() {
// Tabs
$('#datepicker1').datepicker({
beforeShowDay: function(date) {
return [(date.getDay() > 1), ""];
}
minDate: 0,
maxDate: "+12M +0D",
dateFormat: 'dd-mm-yy'
});
});
</script>

Can anyone see anything obvious??

Hi,

I have downloaded the datepicker code from the site http://www.javascriptkit.com/script/...calendar.shtml

It's working fine with Firefox but when run the application on Safari/Chrome and when I load the calendar and try to expand the expansion is uneven... only the center column i.e Wednesday is getting expanded and others are remaining constant.. but in Firefox it's working fine...

Can somebody help me in fixing it..

Thanks,
Ram

Good day!

I explore something so I used jquery in my date, without any knowledge about jquery. I research a sample Jquery Date Picker internet and I found one, my problem is the Year is started at 2001 , I don't know if I could change it so that the year would start atleast 1950's or 1990's

here's the code that I add in my webpage to display the Jquery Date Picker
Code:

<link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#date").datepicker({ showOn: 'button', buttonText: "Select your Birthday" });

});

</script>

I will attach the date picker that I get from internet.

Thank you

Hi,

I am using the JQuery UI Datepicker range.
I would like to change my dates from: mm/dd/yy
to: dd/mm/yy

Can someone please help me?!

thanks

Code:

var dates = $( "#from, #to" ).datepicker({
					defaultDate: "+1w",
					changeMonth: true,
					numberOfMonths: 3,
					onSelect: function( selectedDate ) {
						var option = this.id == "from" ? "minDate" : "maxDate",
							instance = $( this ).data( "datepicker" ),
							date = $.datepicker.parseDate(
								instance.settings.dateFormat ||
								$.datepicker._defaults.dateFormat,
								selectedDate, instance.settings );
						dates.not( this ).datepicker( "option", option, date );
					}
				});

Hi Guys,

I am trying to implement a countdown on my website. I want to calculate the difference between the current date and Jan 1st 2012 at 12:01am. I need to have the format in dd:hh:mm:ss so i can push it into this class. I've been reading posts but can't get it to work properly. Can anyone help me convert the dates?

Thanks in advance.

Hello everyone! I am using a javascript datepicker for a form field, and I had not noticed this before someone brought it up. I dont remember where I got the script but I am wondering if this error can be fixed. I had a look though the code but I do not program javascript, so nothing sticks out to me.

The problem comes when there is already a date in the field. Let me start by saying we format our dates as dd/mm/yyyy.

When a user clicks the field and opens the calendar it automatically goes to the date that is in the field (if there is one). Everything works fine, but when there its a number in the dd/ position that is under 12, the calendar uses it as the month. If the number is over 12, it uses the /mm/ as the month, which is correct.

So today for example, if the date in the field is 08/10/2010, and a user clicks the field to open the calendar, the calendar goes to August 2010... If the date is 15/10/2010 it will go to October which is correct.

Sorry for the length. I am wondering if this can be fixed somehow because finding a new datepicker and switching it on all my pages would take a very long time. Below is the datepicker.js, thanks to anyone who has time to take a look!


Code:

/*
 * DatePicker
 * @author Rick Hopkins
 * @modified by Micah Nolte and Martin Vašina
 * @version 0.3.2
 * @classDescription A date picker object. Created with the help of MooTools v1.11
 * MIT-style License.

-- start it up by doing this in your domready:

$$('input.DatePicker').each( function(el){
	new DatePicker(el);
});

 */

var DatePicker = new Class({

	/* set and create the date picker text box */
	initialize: function(dp){

		// Options defaults
		this.dayChars = 1; // number of characters in day names abbreviation
		this.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
		this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
		this.format = 'dd/mm/yyyy';
		this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
		this.startDay = 7; // 1 = week starts on Monday, 7 = week starts on Sunday
		this.yearOrder = 'asc';
		this.yearRange = 10;
		this.yearStart = (new Date().getFullYear());


		// Finds the entered date, or uses the current date
		if(dp.value != '') {
			dp.then = new Date(dp.value);
			dp.today = new Date();
		} else {
			dp.then = dp.today = new Date();
		}
		// Set beginning time and today, remember the original
		dp.oldYear = dp.year = dp.then.getFullYear();
		dp.oldMonth = dp.month = dp.then.getMonth();
		dp.oldDay = dp.then.getDate();
		dp.nowYear = dp.today.getFullYear();
		dp.nowMonth = dp.today.getMonth();
		dp.nowDay = dp.today.getDate();

		// Pull the rest of the options from the alt attr
		if(dp.alt) {
			options = Json.evaluate(dp.alt);
		} else {
			options = [];
		}
		dp.options = {
			monthNames: (options.monthNames && options.monthNames.length == 12 ? options.monthNames : this.monthNames) || this.monthNames, 
			daysInMonth: (options.daysInMonth && options.daysInMonth.length == 12 ? options.daysInMonth : this.daysInMonth) || this.daysInMonth, 
			dayNames: (options.dayNames && options.dayNames.length == 7 ? options.dayNames : this.dayNames) || this.dayNames,
			startDay : options.startDay || this.startDay,
			dayChars : options.dayChars || this.dayChars, 
			format: options.format || this.format,
			yearStart: options.yearStart || this.yearStart,
			yearRange: options.yearRange || this.yearRange,
			yearOrder: options.yearOrder || this.yearOrder
		};
		dp.setProperties({'id':dp.getProperty('name'), 'readonly':true});
		dp.container = false;
		dp.calendar = false;
		dp.interval = null;
		dp.active = false;
		dp.onclick = dp.onfocus = this.create.pass(dp, this);
	},

	/* create the calendar */
	create: function(dp){
		if (dp.calendar) return false;

		// Hide select boxes while calendar is up
		if(window.ie6){
			$$('select').addClass('dp_hide');
		}
		
		/* create the outer container */
		dp.container = new Element('div', {'class':'dp_container'}).injectBefore(dp);
		
		/* create timers */
		dp.container.onmouseover = dp.onmouseover = function(){
			$clear(dp.interval);
		};
		dp.container.onmouseout = dp.onmouseout = function(){
			dp.interval = setInterval(function(){
				if (!dp.active) this.remove(dp);
			}.bind(this), 500);
		}.bind(this);
		
		/* create the calendar */
		dp.calendar = new Element('div', {'class':'dp_cal'}).injectInside(dp.container);
		
		/* create the date object */
		var date = new Date();
		
		/* create the date object */
		if (dp.month && dp.year) {
			date.setFullYear(dp.year, dp.month, 1);
		} else {
			dp.month = date.getMonth();
			dp.year = date.getFullYear();
			date.setDate(1);
		}
		dp.year % 4 == 0 ? dp.options.daysInMonth[1] = 29 : dp.options.daysInMonth[1] = 28;
		
		/* set the day to first of the month */
		var firstDay = (1-(7+date.getDay()-dp.options.startDay)%7);
		
		
		
		/* create the month select box */
		monthSel = new Element('select', {'id':dp.id + '_monthSelect'});
		for (var m = 0; m < dp.options.monthNames.length; m++){
			monthSel.options[m] = new Option(dp.options.monthNames[m], m);
			if (dp.month == m) monthSel.options[m].selected = true;
		}
		
		/* create the year select box */
		yearSel = new Element('select', {'id':dp.id + '_yearSelect'});
		i = 0;
		dp.options.yearStart ? dp.options.yearStart : dp.options.yearStart = date.getFullYear();
		if (dp.options.yearOrder == 'desc'){
			for (var y = dp.options.yearStart; y > (dp.options.yearStart - dp.options.yearRange - 1); y--){
				yearSel.options[i] = new Option(y, y);
				if (dp.year == y) yearSel.options[i].selected = true;
				i++;
			}
		} else {
			for (var y = dp.options.yearStart; y < (dp.options.yearStart + dp.options.yearRange + 1); y++){
				yearSel.options[i] = new Option(y, y);
				if (dp.year == y) yearSel.options[i].selected = true;
				i++;
			}
		}
		
		/* start creating calendar */
		calTable = new Element('table');
		calTableThead = new Element('thead');
		calSelRow = new Element('tr');
		calSelCell = new Element('th', {'colspan':'7'});
		monthSel.injectInside(calSelCell);
		yearSel.injectInside(calSelCell);
		calSelCell.injectInside(calSelRow);
		calSelRow.injectInside(calTableThead);
		calTableTbody = new Element('tbody');
		
		/* create day names */
		calDayNameRow = new Element('tr');
		for (var i = 0; i < dp.options.dayNames.length; i++) {
			calDayNameCell = new Element('th');
			calDayNameCell.appendText(dp.options.dayNames[(dp.options.startDay+i)%7].substr(0, dp.options.dayChars)); 
			calDayNameCell.injectInside(calDayNameRow);
		}
		calDayNameRow.injectInside(calTableTbody);
		
		/* create the day cells */
		while (firstDay <= dp.options.daysInMonth[dp.month]){
			calDayRow = new Element('tr');
			for (i = 0; i < 7; i++){
				if ((firstDay <= dp.options.daysInMonth[dp.month]) && (firstDay > 0)){
					calDayCell = new Element('td', {'class':dp.id + '_calDay', 'axis':dp.year + '|' + (parseInt(dp.month) + 1) + '|' + firstDay}).appendText(firstDay).injectInside(calDayRow);
				} else {
					calDayCell = new Element('td', {'class':'dp_empty'}).appendText(' ').injectInside(calDayRow);
				}
				// Show the previous day
				if ( (firstDay == dp.oldDay) && (dp.month == dp.oldMonth ) && (dp.year == dp.oldYear) ) {
					calDayCell.addClass('dp_selected');
				}
				// Show today
				if ( (firstDay == dp.nowDay) && (dp.month == dp.nowMonth ) && (dp.year == dp.nowYear) ) {
					calDayCell.addClass('dp_today');
				}
				firstDay++;
			}
			calDayRow.injectInside(calTableTbody);
		}
		
		/* table into the calendar div */
		calTableThead.injectInside(calTable);
		calTableTbody.injectInside(calTable);
		calTable.injectInside(dp.calendar);
		
		/* set the onmouseover events for all calendar days */
		$$('td.' + dp.id + '_calDay').each(function(el){
			el.onmouseover = function(){
				el.addClass('dp_roll');
			}.bind(this);
		}.bind(this));
		
		/* set the onmouseout events for all calendar days */
		$$('td.' + dp.id + '_calDay').each(function(el){
			el.onmouseout = function(){
				el.removeClass('dp_roll');
			}.bind(this);
		}.bind(this));
		
		/* set the onclick events for all calendar days */
		$$('td.' + dp.id + '_calDay').each(function(el){
			el.onclick = function(){
				ds = el.axis.split('|');
				dp.value = this.formatValue(dp, ds[0], ds[1], ds[2]);
				this.remove(dp);
			}.bind(this);
		}.bind(this));
		
		/* set the onchange event for the month & year select boxes */
		monthSel.onfocus = function(){ dp.active = true; };
		monthSel.onchange = function(){
			dp.month = monthSel.value;
			dp.year = yearSel.value;
			this.remove(dp);
			this.create(dp);
		}.bind(this);
		
		yearSel.onfocus = function(){ dp.active = true; };
		yearSel.onchange = function(){
			dp.month = monthSel.value;
			dp.year = yearSel.value;
			this.remove(dp);
			this.create(dp);
		}.bind(this);
	},
	
	/* Format the returning date value according to the selected formation */
	formatValue: function(dp, year, month, day){
		/* setup the date string variable */
		var dateStr = '';
		
		/* check the length of day */
		if (day < 10) day = '0' + day;
		if (month < 10) month = '0' + month;
		
		/* check the format & replace parts // thanks O'Rey */
		dateStr = dp.options.format.replace( /dd/i, day ).replace( /mm/i, month ).replace( /yyyy/i, year );
		dp.month = dp.oldMonth = '' + (month - 1) + '';
		dp.year = dp.oldYear = year;
		dp.oldDay = day;
		
		/* return the date string value */
		return dateStr;
	},
	
	/* Remove the calendar from the page */
	remove: function(dp){
		$clear(dp.interval);
		dp.active = false;
		if (window.opera) dp.container.empty();
		else if (dp.container) dp.container.remove();
		dp.calendar = false;
		dp.container = false;
		$$('select.dp_hide').removeClass('dp_hide');
	}
});

Hi

I was playing around with the jQuery Multiple months plugin and was wondering if there was anyway I could display 4 months in it with 2 months on top and the other two months at bottom.

OR

If that is not possible then can we display 2 different instance of calendars something like this screenshot but changing the month on either one would change the other two months of the other calendar at the same time.




If anyone can help, i will be greateful.

Thanks in advance

Hi,

I am using the jQuery UI Datepicker - Event Search. as a booking-system.

I want to automatically disable days from my MYSQL table in my booking-system (datePicker).

So, here is the deal:

In my website, there is booking-system, you can reserve a room from datePicker.

I have successfully created a PHP, which sends the information (name, room, date etc.) to my MYSQL.

Then I have successfully created a datesonly.php, which prints only a dates from my MYSQL.

So now I have to make javascript (?) which reads dates from datesonly.php and draws a booked-note to my datePicker at website (so people can see which days are booked --> no double-books!).

Booked-note should be something like that day in datePicker is red.


Thank you! And sorry for my bad english, I'm from Finland.
EDIT: Sorry, the title should be:
Disabling days from datePicker via JavaScript