JavaScript - Jquery Ui Datepicker Default Date Of Second Calendar Depending On First

Hello

I am trying to change the default date format within my date picker, but nothing I do seems to work.

This is the relevant Code:

Code:

$(function() {
	Date.format = 'yy-mm-dd';
	$('#popupDatepicker').datepick();
});
 

<p><b>Date Of Birth:</b><input type="text" name="dob" id="popupDatepicker"><br>

All I see is dd/mm/yy no matter what I change

I need it in a format suitable for MySQL

Thanks

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));
	}
}

Hi All,

I am very new to javascript.

I want to open a pop up window automatically on the date when i have mentioned in the function, means if the date is equal to 24/07/2011, then when i open the website open the pop up window...

How to do that? Please suggest

Hi,

I'd like to use the jQuery validation plugin as seen on the following example:
http://docs.jquery.com/Plugins/validation#Example

But it doesn't work properly if I use inline/in-filed labels.


Any help is appreciated!
Rain Lover

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

Hey all i have this piece of code before that disables the given dates i put into an array. This works great for day 2-30 (out of a 31 day month) but it does not seem to work when i select either day 1 or day 31.

For day 1 it blocks out day 1 and i do not want that. The user should be able to select that day since it was selected. It does not do this for any other day. If the user selects day 2 then day 2 is selected on the calender and is not blocked.

As for day 31, i don't know whats wrong with it because it never shows me an error. It's the type of error that shuts down the website with "System Unavailable" for about a minute before i can connect to the page again.

Here is my code:
Code:

var disabledDays = ['3-31-2010','3-30-2010','3-29-2010','3-28-2010','3-27-2010','3-26-2010','3-25-2010','3-24-2010','3-23-2010','3-22-2010','3-21-2010','3-20-2010','3-19-2010','3-18-2010','3-17-2010','3-16-2010','3-15-2010','3-14-2010','3-13-2010','3-12-2010','3-11-2010','3-10-2010','3-9-2010','3-8-2010','3-7-2010','3-6-2010','3-05-2010'];
 
	function nationalDays(date) {
	var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();

	//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
				
	for (i = 0; i < disabledDays.length; i++) {
		if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) {
			//console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
			return [false];
		}
	}
		//console.log('good:  ' + (m+1) + '-' + d + '-' + y);
		return [true];
	}
		
	function noWeekendsOrHolidays(date) {
		return nationalDays(date);
	}
 
	function ArrayIndexOf(array,item,from){
	var len = array.length;

	for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){
		if (array[i] === item) return i;
	}
		return -1;
	}
			
	function ArrayContains(array,item,from){
		return ArrayIndexOf(array,item,from) != -1;
	}

Any help would be great!

David

Hello,

I am a newbie to this forum. I have searched for the problem that I have in this forum but found none.

I am creating a calendar using html/css and javascript. I used one the free javascript for calendar on the internet and modified it to the way I wanted it to be. However, I could not write the if statement so that the calendar will highlight the current date of the current month only, not all 12 months. And I could not write the if statement so that the calendar will know what day is a holiday and make it red color. Here is my code:

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Calendar</title>

<style type="text/css">

#left {position:absolute;left:40px;top:10px;}
#right {position:absolute;left:400px;top:10px;}
.table1 {border-collapse:collapse;background-color:#efefef;}
.th2 {height:10px;background-color:#eeeee0;color:#951159;font-size:10px;}
.sunday {background-color:#DD2211;font-size:10px;font-weight:bold;color:ivory;width:20px;height:8px;}
.day {background-color:navy;font-size:10px;font-weight:bold;color:ivory;width:20px;height:8px;}
.date0 {border:1px solid #cccccc;font-size:10px;color:red;font-weight:bold;text-align:center;} /*  This is the color for Sundays and Holidays */
.date1 {border:1px solid #cccccc;font-size:10px;height:10px;font-weight:bold;text-align:center;} /*  This is the color for regular days */
.today {border:1px solid #cccccc;font-size:10px; color:#0000ff;background-color:#daffee;} /*  This is the color for current day */

</style>
</head>


<body bgcolor=#cccccc>
<div id="left">

<script>
var i=0;
for (i=0;i<=5;i++)
{

function leapYear(year) {
if (year % 4 == 0) // basic rule
return true // is leap year
/* else */ // else not needed when statement is "return"
return false // is not leap year
}

function getDays(month, year) {
// create array to hold number of days in each month

var ar = new Array(12)
ar[0] = 31 // January
ar[1] = (leapYear(year)) ? 29 : 28 // February
ar[2] = 31 // March
ar[3] = 30 // April
ar[4] = 31 // May
ar[5] = 30 // June
ar[6] = 31 // July
ar[7] = 31 // August
ar[8] = 30 // September
ar[9] = 31 // October
ar[10] = 30 // November
ar[11] = 31 // December

// return number of days in the specified month (parameter)
return ar[month]
} 

function getMonthName(month) {
// create array to hold name of each month
var ar = new Array( "JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE", "JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER")

// return name of specified month (parameter)
return ar[month]
}

setCal()

function setCal() {
// standard time attributes
var now = new Date()
var year = now.getFullYear()
var current_month = now.getMonth()
var date = now.getDate()
now = null
var month = i
var monthName = getMonthName(month)

// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null

// number of days in current month
var days = getDays(month, year)

// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year)
}

function drawCal(firstDay, lastDate, date, monthName, year) {

// create basic table structure
var text = "" // initialize accumulative variable to empty string

text += '<CENTER>'
text += '<TABLE class="table1">' // table settings
text += '<TH COLSPAN=7 class="th2">'
text += monthName + ' &nbsp; ' +  year
text += '</TH>' // close header cell

// create array of abbreviated day names
var weekDay = new Array("SUN", "MON","TUE","WED", "THU", "FRI", "SAT")

// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
  if (dayNum == 0) {
     text += '<TD class="sunday">' + weekDay[dayNum] + '</TD>'
     } else {
     text += '<TD class="day">' + weekDay[dayNum] + '</TD>'
     }
}
text += '</TR>'

// declaration and initialization of two variables to help with tables
var digit = 1
var curCell = 1

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="left" VALIGN="top">'
   for (var col = 1; col <= 7; ++col) {
         if (digit > lastDate)
         break
            if (curCell < firstDay) {
               text += '<TD></TD>';
               curCell++
           } else {
                       if (col ==1) {  //  This is to make the text color red if it is Sunday
                          text += '<TD class="date0">' + digit + '</TD>'
                       } else
                                /* if ((month ==1) && (col ==2) && (row==3)) {  //  This is to make the text color red if it is a holiday
                                    text += '<TD class="date0">' + digit + '</TD>'
                                    } else */
                       /* if (digit == date) { // current cell represent today's date
                          text += '<TD class="today">'
                          text += digit
                          text += '</TD>'
                       } else */
                         text += '<TD class="date1">' + digit + '</TD>'
                         digit++
                      }
   }
text += '</TR>'
}

// close all basic table tags
text += '</TABLE>'
text += '</CENTER>'

// print accumulative HTML string
document.write(text)
}
}
</script>

</div>

<!-- #################################################################### -->

<div id="right">

<script>
var i=0;
for (i=0;i<=5;i++)
{

function leapYear(year) {
if (year % 4 == 0) // basic rule
return true // is leap year
/* else */ // else not needed when statement is "return"
return false // is not leap year
}

function getDays(month, year) {
// create array to hold number of days in each month

var ar = new Array(12)
ar[0] = 31 // January
ar[1] = (leapYear(year)) ? 29 : 28 // February
ar[2] = 31 // March
ar[3] = 30 // April
ar[4] = 31 // May
ar[5] = 30 // June
ar[6] = 31 // July
ar[7] = 31 // August
ar[8] = 30 // September
ar[9] = 31 // October
ar[10] = 30 // November
ar[11] = 31 // December

// return number of days in the specified month (parameter)
return ar[month]
} 

function getMonthName(month) {
// create array to hold name of each month
var ar = new Array( "JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER")

// return name of specified month (parameter)
return ar[month]
}

setCal()

function setCal() {
// standard time attributes
var now = new Date()
var year = now.getFullYear()
var current_month = now.getMonth()
var date = now.getDate()
now = null
var month = i
var monthName = getMonthName(month)

// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null

// number of days in current month
var days = getDays(month, year)

// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year)
}

function drawCal(firstDay, lastDate, date, monthName, year) {

// create basic table structure
var text = "" // initialize accumulative variable to empty string

text += '<CENTER>'
text += '<TABLE class="table1">' // table settings
text += '<TH COLSPAN=7 class="th2">'
text += monthName + ' &nbsp; ' +  year
text += '</TH>' // close header cell

// create array of abbreviated day names
var weekDay = new Array("SUN", "MON","TUE","WED", "THU", "FRI", "SAT")

// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
  if (dayNum == 0) {
     text += '<TD class="sunday">' + weekDay[dayNum] + '</TD>'
     } else {
     text += '<TD class="day">' + weekDay[dayNum] + '</TD>'
     }
}
text += '</TR>'

// declaration and initialization of two variables to help with tables
var digit = 1
var curCell = 1

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="left" VALIGN="top">'
   for (var col = 1; col <= 7; ++col) {
         if (digit > lastDate)
         break
            if (curCell < firstDay) {
               text += '<TD></TD>';
               curCell++
           } else {
                       if (col ==1) {  //  This is to make the text color red if it is Sunday
                          text += '<TD class="date0">' + digit + '</TD>'
                       } else
                                /* if ((month ==1) && (col ==2) && (row==3)) {  //  This is to make the text color red if it is a holiday
                                    text += '<TD class="date0">' + digit + '</TD>'
                                    } else */
                       /* if (digit == date) { // current cell represent today's date
                          text += '<TD class="today">'
                          text += digit
                          text += '</TD>'
                       } else */
                         text += '<TD class="date1">' + digit + '</TD>'
                         digit++
                      }
   }
text += '</TR>'
}

// close all basic table tags
text += '</TABLE>'
text += '</CENTER>'

// print accumulative HTML string
document.write(text)
}
}
</script>

</div>
</body>
</html>

This is just for my practice in html/css and javascript. Thanks for all your time and support.

kvkt

Hi all,

I'm using the Epoch calendar at:

http://www.javascriptkit.com/script/...ch/index.shtml

It works great and does exactly what I need. I'm using it in flat mode so that it can be displayed statically on the page. What I can't seem to work out is how to retrieve the selected date once clicked on. I need to be able to print the output in dd/mm/yyyy format, either on screen or in an alert or something similar.

If anyone has worked with this calendar and knows how to do it, or can sort it, I'd appreciate it greatly. I can't paste code here as it's too long, but the source code on the site linked above is exactly the same as I'm using.

Cheers!

Hello everyone,

I am creating a small application for my memory book. I want to have one of those calendars like in Here .. that would retutn values like: day month year - seperatelly that I could use in php.

Im looking for easy solution if there is one.. Simple and short script

Kind regards,
Aurimas

I have a calendar and when selecting the date the date format inserted to text box is in the format ' 10/10/2010'. This is not getting inserted into oracle database. Oracle accepts only the format '10-OCT-10' . So please help me to change the format of date that getting selected from calendar.

Code is given below (calendar.html, calendar.js & style.css)

//calendar.html

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="standard.css" type="text/css" />
<script type="text/javascript" src="calendar.js"></script>
<title>CALENDAR</title>
</head>
<body>
<label>Date :&nbsp;</label><input name="startdate" type="text" onClick="displayDatePicker('startdate')">
<script type="text/javascript">
window.onLoad(displayDatePicker('ADate'));
</script></body></html>

//calendar.js

Code:

var datePickerDivID = "datepicker";
var iFrameDivID = "datepickeriframe";

var dayArrayShort = new Array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa');
var dayArrayMed = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
var dayArrayLong = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
var monthArrayShort = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
var monthArrayMed = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
var monthArrayLong = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
 
// these variables define the date formatting we're expecting and outputting.
// If you want to use a different format by default, change the defaultDateSeparator
// and defaultDateFormat variables either here or on your HTML page.
var defaultDateSeparator = "/";        // common values would be "/" or "."
var defaultDateFormat = "dmy"    // valid values are "mdy", "dmy", and "ymd"
var dateSeparator = defaultDateSeparator;
var dateFormat = defaultDateFormat;


function displayDatePicker(dateFieldName, displayBelowThisObject, dtFormat, dtSep)
{
  var targetDateField = document.getElementsByName (dateFieldName).item(0);
 
  // if we weren't told what node to display the datepicker beneath, just display it
  // beneath the date field we're updating
  if (!displayBelowThisObject)
    displayBelowThisObject = targetDateField;
 
  // if a date separator character was given, update the dateSeparator variable
  if (dtSep)
    dateSeparator = dtSep;
  else
    dateSeparator = defaultDateSeparator;
 
  // if a date format was given, update the dateFormat variable
  if (dtFormat)
    dateFormat = dtFormat;
  else
    dateFormat = defaultDateFormat;
 
  var x = displayBelowThisObject.offsetLeft;
  var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;
 
  // deal with elements inside tables and such
  var parent = displayBelowThisObject;
  while (parent.offsetParent) {
    parent = parent.offsetParent;
    x += parent.offsetLeft;
    y += parent.offsetTop ;
  }
 
  drawDatePicker(targetDateField, x, y);
}


/**
Draw the datepicker object (which is just a table with calendar elements) at the
specified x and y coordinates, using the targetDateField object as the input tag
that will ultimately be populated with a date.

This function will normally be called by the displayDatePicker function.
*/
function drawDatePicker(targetDateField, x, y)
{
  var dt = getFieldDate(targetDateField.value );
 
  // the datepicker table will be drawn inside of a <div> with an ID defined by the
  // global datePickerDivID variable. If such a div doesn't yet exist on the HTML
  // document we're working with, add one.
  if (!document.getElementById(datePickerDivID)) {
    // don't use innerHTML to update the body, because it can cause global variables
    // that are currently pointing to objects on the page to have bad references
    //document.body.innerHTML += "<div id='" + datePickerDivID + "' class='dpDiv'></div>";
    var newNode = document.createElement("div");
    newNode.setAttribute("id", datePickerDivID);
    newNode.setAttribute("class", "dpDiv");
    newNode.setAttribute("style", "visibility: hidden;");
    document.body.appendChild(newNode);
  }
 
  // move the datepicker div to the proper x,y coordinate and toggle the visiblity
  var pickerDiv = document.getElementById(datePickerDivID);
  pickerDiv.style.position = "absolute";
  pickerDiv.style.left = x + "px";
  pickerDiv.style.top = y + "px";
  pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" ? "hidden" : "visible");
  pickerDiv.style.display = (pickerDiv.style.display == "block" ? "none" : "block");
  pickerDiv.style.zIndex = 10000;
 
  // draw the datepicker table
  refreshDatePicker(targetDateField.name, dt.getFullYear(), dt.getMonth(), dt.getDate());
}


/**
This is the function that actually draws the datepicker calendar.
*/
function refreshDatePicker(dateFieldName, year, month, day)
{
  // if no arguments are passed, use today's date; otherwise, month and year
  // are required (if a day is passed, it will be highlighted later)
  var thisDay = new Date();
 
  if ((month >= 0) && (year > 0)) {
    thisDay = new Date(year, month, 1);
  } else {
    day = thisDay.getDate();
    thisDay.setDate(1);
  }
 
  // the calendar will be drawn as a table
  // you can customize the table elements with a global CSS style sheet,
  // or by hardcoding style and formatting elements below
  var crlf = "\r\n";
  var TABLE = "<table cols=7 class='dpTable'>" + crlf;
  var xTABLE = "</table>" + crlf;
  var TR = "<tr class='dpTR'>";
  var TR_title = "<tr class='dpTitleTR'>";
  var TR_days = "<tr class='dpDayTR'>";
  var TR_todaybutton = "<tr class='dpTodayButtonTR'>";
  var xTR = "</tr>" + crlf;
  var TD = "<td class='dpTD' onMouseOut='this.className=\"dpTD\";' onMouseOver=' this.className=\"dpTDHover\";' ";    // leave this tag open, because we'll be adding an onClick event
  var TD_title = "<td colspan=5 class='dpTitleTD'>";
  var TD_buttons = "<td class='dpButtonTD'>";
  var TD_todaybutton = "<td colspan=7 class='dpTodayButtonTD'>";
  var TD_days = "<td class='dpDayTD'>";
  var TD_selected = "<td class='dpDayHighlightTD' onMouseOut='this.className=\"dpDayHighlightTD\";' onMouseOver='this.className=\"dpTDHover\";' ";    // leave this tag open, because we'll be adding an onClick event
  var xTD = "</td>" + crlf;
  var DIV_title = "<div class='dpTitleText'>";
  var DIV_selected = "<div class='dpDayHighlight'>";
  var xDIV = "</div>";
 
  // start generating the code for the calendar table
  var html = TABLE;
 
  // this is the title bar, which displays the month and the buttons to
  // go back to a previous month or forward to the next month
  html += TR_title;
  html += TD_buttons + getButtonCode(dateFieldName, thisDay, -1, "&lt;") + xTD;
  html += TD_title + DIV_title + monthArrayLong[ thisDay.getMonth()] + " " + thisDay.getFullYear() + xDIV + xTD;
  html += TD_buttons + getButtonCode(dateFieldName, thisDay, 1, "&gt;") + xTD;
  html += xTR;
 
  // this is the row that indicates which day of the week we're on
  html += TR_days;
  for(i = 0; i < dayArrayShort.length; i++)
    html += TD_days + dayArrayShort[i] + xTD;
  html += xTR;
 
  // now we'll start populating the table with days of the month
  html += TR;
 
  // first, the leading blanks
  for (i = 0; i < thisDay.getDay(); i++)
    html += TD + "&nbsp;" + xTD;
 
  // now, the days of the month
  do {
    dayNum = thisDay.getDate();
    TD_onclick = " onclick=\"updateDateField('" + dateFieldName + "', '" + getDateString(thisDay) + "');\">";
    
    if (dayNum == day)
      html += TD_selected + TD_onclick + DIV_selected + dayNum + xDIV + xTD;
    else
      html += TD + TD_onclick + dayNum + xTD;
    
    // if this is a Saturday, start a new row
    if (thisDay.getDay() == 6)
      html += xTR + TR;
    
    // increment the day
    thisDay.setDate(thisDay.getDate() + 1);
  } while (thisDay.getDate() > 1)
 
  // fill in any trailing blanks
  if (thisDay.getDay() > 0) {
    for (i = 6; i > thisDay.getDay(); i--)
      html += TD + "&nbsp;" + xTD;
  }
  html += xTR;
 
  // add a button to allow the user to easily return to today, or close the calendar
  var today = new Date();
  var todayString = "Today is " + dayArrayMed[today.getDay()] + ", " + monthArrayMed[ today.getMonth()] + " " + today.getDate();
  html += TR_todaybutton + TD_todaybutton;
  html += "<button class='dpTodayButton' onClick='refreshDatePicker(\"" + dateFieldName + "\");'>this month</button> ";
  html += xTD + xTR;
 
  // and finally, close the table
  html += xTABLE;
 
  document.getElementById(datePickerDivID).innerHTML = html;
  // add an "iFrame shim" to allow the datepicker to display above selection lists
  adjustiFrame();
}


/**
Convenience function for writing the code for the buttons that bring us back or forward
a month.
*/
function getButtonCode(dateFieldName, dateVal, adjust, label)
{
  var newMonth = (dateVal.getMonth () + adjust) % 12;
  var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);
  if (newMonth < 0) {
    newMonth += 12;
    newYear += -1;
  }
 
  return "<button class='dpButton' onClick='refreshDatePicker(\"" + dateFieldName + "\", " + newYear + ", " + newMonth + ");'>" + label + "</button>";
}


/**
Convert a JavaScript Date object to a string, based on the dateFormat and dateSeparator
variables at the beginning of this script library.
*/
function getDateString(dateVal)
{
  var dayString = "00" + dateVal.getDate();
  var monthString = "00" + (dateVal.getMonth()+1);
  dayString = dayString.substring(dayString.length - 2);
  monthString = monthString.substring(monthString.length - 2);
 
  switch (dateFormat) {
    case "dmy" :
      return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear();
    case "ymd" :
      return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;
    case "mdy" :
    default :
      return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear();
  }
}


/**
Convert a string to a JavaScript Date object.
*/
function getFieldDate(dateString)
{
  var dateVal;
  var dArray;
  var d, m, y;
 
  try {
    dArray = splitDateString(dateString);
    if (dArray) {
      switch (dateFormat) {
        case "dmy" :
          d = parseInt(dArray[0], 10);
          m = parseInt(dArray[1], 10) - 1;
          y = parseInt(dArray[2], 10);
          break;
        case "ymd" :
          d = parseInt(dArray[2], 10);
          m = parseInt(dArray[1], 10) - 1;
          y = parseInt(dArray[0], 10);
          break;
        case "mdy" :
        default :
          d = parseInt(dArray[1], 10);
          m = parseInt(dArray[0], 10) - 1;
          y = parseInt(dArray[2], 10);
          break;
      }
      dateVal = new Date(y, m, d);
    } else if (dateString) {
      dateVal = new Date(dateString);
    } else {
      dateVal = new Date();
    }
  } catch(e) {
    dateVal = new Date();
  }
 
  return dateVal;
}


/**
Try to split a date string into an array of elements, using common date separators.
If the date is split, an array is returned; otherwise, we just return false.
*/
function splitDateString(dateString)
{
  var dArray;
  if (dateString.indexOf("/") >= 0)
    dArray = dateString.split("/");
  else if (dateString.indexOf(".") >= 0)
    dArray = dateString.split(".");
  else if (dateString.indexOf("-") >= 0)
    dArray = dateString.split("-");
  else if (dateString.indexOf("\\") >= 0)
    dArray = dateString.split("\\");
  else
    dArray = false;
 
  return dArray;
}


function updateDateField(dateFieldName, dateString)
{
  var targetDateField = document.getElementsByName (dateFieldName).item(0);
  if (dateString)
    targetDateField.value = dateString;
 
  var pickerDiv = document.getElementById(datePickerDivID);
  pickerDiv.style.visibility = "hidden";
  pickerDiv.style.display = "none";
 
  adjustiFrame();
  targetDateField.focus();
 
  // after the datepicker has closed, optionally run a user-defined function called
  // datePickerClosed, passing the field that was just updated as a parameter
  // (note that this will only run if the user actually selected a date from the datepicker)
  if ((dateString) && (typeof(datePickerClosed) == "function"))
    datePickerClosed(targetDateField);
}


/**
Use an "iFrame shim" to deal with problems where the datepicker shows up behind
selection list elements, if they're below the datepicker. The problem and solution are
described at:

http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx
http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx
*/
function adjustiFrame(pickerDiv, iFrameDiv)
{
  // we know that Opera doesn't like something about this, so if we
  // think we're using Opera, don't even try
  var is_opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
  if (is_opera)
    return;
  
  // put a try/catch block around the whole thing, just in case
  try {
    if (!document.getElementById(iFrameDivID)) {
      // don't use innerHTML to update the body, because it can cause global variables
      // that are currently pointing to objects on the page to have bad references
      //document.body.innerHTML += "<iframe id='" + iFrameDivID + "' src='javascript:false;' scrolling='no' frameborder='0'>";
      var newNode = document.createElement("iFrame");
      newNode.setAttribute("id", iFrameDivID);
      newNode.setAttribute("src", "javascript:false;");
      newNode.setAttribute("scrolling", "no");
      newNode.setAttribute ("frameborder", "0");
      document.body.appendChild(newNode);
    }
    
    if (!pickerDiv)
      pickerDiv = document.getElementById(datePickerDivID);
    if (!iFrameDiv)
      iFrameDiv = document.getElementById(iFrameDivID);
    
    try {
      iFrameDiv.style.position = "absolute";
      iFrameDiv.style.width = pickerDiv.offsetWidth;
      iFrameDiv.style.height = pickerDiv.offsetHeight ;
      iFrameDiv.style.top = pickerDiv.style.top;
      iFrameDiv.style.left = pickerDiv.style.left;
      iFrameDiv.style.zIndex = pickerDiv.style.zIndex - 1;
      iFrameDiv.style.visibility = pickerDiv.style.visibility ;
      iFrameDiv.style.display = pickerDiv.style.display;
    } catch(e) {
    }
 
  } catch (ee) {
  }
 
}

//style.css

Code:

body { margin:5px 5px; font-size:0.9em; font-family: "Myriad Pro", "Trebuchet MS", Arial; font-size:14px; border:1px solid #000; background-color:#CCCCFF;}
a { color:#64a520; text-decoration:none;}
a:hover { text-decoration:underline;}

	
	
/*Calendar Styles*/
	
/* the div that holds the date picker calendar */
.dpDiv {
	}


/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	color:#000000;
	background-color:#99CCCC;
	border: 1px solid #AAAAAA;
	}


/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
	}


/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
	}


/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
	}


/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
	}


/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	border: 1px solid #ece9d8;
	}


/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	}


/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: #aca998;
	border: 1px solid #888888;
	cursor: pointer;
	color: red;
	}


/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	}


/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
	}


/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
	}


/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	color: white;
	}


/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 12px;
	color: gray;
	font-weight: bold;
	}


/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
	color: 4060ff;
	font-weight: bold;
	}


/* the forward/backward buttons at the top */
.dpButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	padding: 0px;
	}


/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	}

what can be the reasons for the same code which works perfectly in notepad to not show its result in a jsp application done using eclipse??anything to do with settings?
I am not able to display the current date as default in dd/mm/yyyy format in drop down boxes..only dd and yyyy apears but month isnt apearing as default..
can u suggest alternative logic and its code to implement the same??

Hello

I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page:
http://www.watphotos.com/introductio...otography.html

And here is the code in question:

Code:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
 $(document).ready(function(){
	var initial	= 0
	var total = 0;
	var services = 0;
	function addServices()
	{
		initial = 150
		total = initial
		services = 0;
		$("input:checked").each(function(){
			value = $(this).attr("value");		
			services += parseInt(value);
		});
	}
	$(function()
	{
		addServices();
		total += services;
		$("form").before('<p class="price"></p>')		
		$("p.price").text("Total Price: US$" + total);
	});
 	$("input:radio, input:checkbox").click(function () {
		addServices();
		total += services
		$("p.price").text("Total Price: US$" + total);
    });
 
 });
 
</script>

I have two questions...

Question 1
How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky.
I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this?

Question 2
The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document?

Thanks in advance!

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.