Solved

javascript to pop up the calendar with date n time in the form

Posted on 2008-10-06
7
523 Views
Last Modified: 2012-05-05
Hello Experts,

I am looking for a javascript which will invoke a pop up calendar to select the date n time which should put the selected values to the input box in the form.

Thanks
0
Comment
Question by:Shiva_Kumar
  • 3
  • 3
7 Comments
 
LVL 16

Expert Comment

by:brad2575
ID: 22652128
I have used this one a lot and liked it, very versatile.

http://www.mattkruse.com/javascript/calendarpopup/
0
 

Author Comment

by:Shiva_Kumar
ID: 22652461
I am new to JS and its very confusing.  Could you pls suggest some recommendation/usage of this code.
0
 
LVL 16

Expert Comment

by:brad2575
ID: 22652500
Some steps would be to first download the code under the "Source" tab.  Have the files includes in script tags on your page you want to use this on.

Then from the examples in the link determine what style/format you want the calander to appear in, then use those options on your site.

If you have any questions once you get started I will be happy to help, but I think the link above explains it much better then I could.

If you are new to JS this may be a bit advanced for you to implement for someone new to JS.
0
Easy Project Management (No User Manual Required)

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:Shiva_Kumar
ID: 22653576
ok here's my code.  let me know what i am doing wrong here...

I have copied all the mentioned files( AnchorPosition.js, date.js, PopupWindow.js) in the same directory from where i am running the following form.



<html>

<head>

</head>

<script language = "javascript" src="AnchorPosition.js" src="date.js" scr="PopupWindow.js">
 
 

// CONSTRUCTOR for the CalendarPopup Object

function CalendarPopup() {

	var c;

	if (arguments.length>0) {

		c = new PopupWindow(arguments[0]);

		}

	else {

		c = new PopupWindow();

		c.setSize(150,175);

		}

	c.offsetX = -152;

	c.offsetY = 25;

	c.autoHide();

	// Calendar-specific properties

	c.monthNames = new Array("January","February","March","April","May","June","July","August","September","October","November","December");

	c.monthAbbreviations = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");

	c.dayHeaders = new Array("S","M","T","W","T","F","S");

	c.returnFunction = "CP_tmpReturnFunction";

	c.returnMonthFunction = "CP_tmpReturnMonthFunction";

	c.returnQuarterFunction = "CP_tmpReturnQuarterFunction";

	c.returnYearFunction = "CP_tmpReturnYearFunction";

	c.weekStartDay = 0;

	c.isShowYearNavigation = false;

	c.displayType = "date";

	c.disabledWeekDays = new Object();

	c.disabledDatesExpression = "";

	c.yearSelectStartOffset = 2;

	c.currentDate = null;

	c.todayText="Today";

	c.cssPrefix="";

	c.isShowNavigationDropdowns=false;

	c.isShowYearNavigationInput=false;

	window.CP_calendarObject = null;

	window.CP_targetInput = null;

	window.CP_dateFormat = "MM/dd/yyyy";

	// Method mappings

	c.copyMonthNamesToWindow = CP_copyMonthNamesToWindow;

	c.setReturnFunction = CP_setReturnFunction;

	c.setReturnMonthFunction = CP_setReturnMonthFunction;

	c.setReturnQuarterFunction = CP_setReturnQuarterFunction;

	c.setReturnYearFunction = CP_setReturnYearFunction;

	c.setMonthNames = CP_setMonthNames;

	c.setMonthAbbreviations = CP_setMonthAbbreviations;

	c.setDayHeaders = CP_setDayHeaders;

	c.setWeekStartDay = CP_setWeekStartDay;

	c.setDisplayType = CP_setDisplayType;

	c.setDisabledWeekDays = CP_setDisabledWeekDays;

	c.addDisabledDates = CP_addDisabledDates;

	c.setYearSelectStartOffset = CP_setYearSelectStartOffset;

	c.setTodayText = CP_setTodayText;

	c.showYearNavigation = CP_showYearNavigation;

	c.showCalendar = CP_showCalendar;

	c.hideCalendar = CP_hideCalendar;

	c.getStyles = getCalendarStyles;

	c.refreshCalendar = CP_refreshCalendar;

	c.getCalendar = CP_getCalendar;

	c.select = CP_select;

	c.setCssPrefix = CP_setCssPrefix;

	c.showNavigationDropdowns = CP_showNavigationDropdowns;

	c.showYearNavigationInput = CP_showYearNavigationInput;

	c.copyMonthNamesToWindow();

	// Return the object

	return c;

	}

function CP_copyMonthNamesToWindow() {

	// Copy these values over to the date.js 

	if (typeof(window.MONTH_NAMES)!="undefined" && window.MONTH_NAMES!=null) {

		window.MONTH_NAMES = new Array();

		for (var i=0; i<this.monthNames.length; i++) {

			window.MONTH_NAMES[window.MONTH_NAMES.length] = this.monthNames[i];

		}

		for (var i=0; i<this.monthAbbreviations.length; i++) {

			window.MONTH_NAMES[window.MONTH_NAMES.length] = this.monthAbbreviations[i];

		}

	}

}

// Temporary default functions to be called when items clicked, so no error is thrown

function CP_tmpReturnFunction(y,m,d) { 

	if (window.CP_targetInput!=null) {

		var dt = new Date(y,m-1,d,0,0,0);

		if (window.CP_calendarObject!=null) { window.CP_calendarObject.copyMonthNamesToWindow(); }

		window.CP_targetInput.value = formatDate(dt,window.CP_dateFormat);

		}

	else {

		alert('Use setReturnFunction() to define which function will get the clicked results!'); 

		}

	}

function CP_tmpReturnMonthFunction(y,m) { 

	alert('Use setReturnMonthFunction() to define which function will get the clicked results!\nYou clicked: year='+y+' , month='+m); 

	}

function CP_tmpReturnQuarterFunction(y,q) { 

	alert('Use setReturnQuarterFunction() to define which function will get the clicked results!\nYou clicked: year='+y+' , quarter='+q); 

	}

function CP_tmpReturnYearFunction(y) { 

	alert('Use setReturnYearFunction() to define which function will get the clicked results!\nYou clicked: year='+y); 

	}
 

// Set the name of the functions to call to get the clicked item

function CP_setReturnFunction(name) { this.returnFunction = name; }

function CP_setReturnMonthFunction(name) { this.returnMonthFunction = name; }

function CP_setReturnQuarterFunction(name) { this.returnQuarterFunction = name; }

function CP_setReturnYearFunction(name) { this.returnYearFunction = name; }
 

// Over-ride the built-in month names

function CP_setMonthNames() {

	for (var i=0; i<arguments.length; i++) { this.monthNames[i] = arguments[i]; }

	this.copyMonthNamesToWindow();

	}
 

// Over-ride the built-in month abbreviations

function CP_setMonthAbbreviations() {

	for (var i=0; i<arguments.length; i++) { this.monthAbbreviations[i] = arguments[i]; }

	this.copyMonthNamesToWindow();

	}
 

// Over-ride the built-in column headers for each day

function CP_setDayHeaders() {

	for (var i=0; i<arguments.length; i++) { this.dayHeaders[i] = arguments[i]; }

	}
 

// Set the day of the week (0-7) that the calendar display starts on

// This is for countries other than the US whose calendar displays start on Monday(1), for example

function CP_setWeekStartDay(day) { this.weekStartDay = day; }
 

// Show next/last year navigation links

function CP_showYearNavigation() { this.isShowYearNavigation = (arguments.length>0)?arguments[0]:true; }
 

// Which type of calendar to display

function CP_setDisplayType(type) {

	if (type!="date"&&type!="week-end"&&type!="month"&&type!="quarter"&&type!="year") { alert("Invalid display type! Must be one of: date,week-end,month,quarter,year"); return false; }

	this.displayType=type;

	}
 

// How many years back to start by default for year display

function CP_setYearSelectStartOffset(num) { this.yearSelectStartOffset=num; }
 

// Set which weekdays should not be clickable

function CP_setDisabledWeekDays() {

	this.disabledWeekDays = new Object();

	for (var i=0; i<arguments.length; i++) { this.disabledWeekDays[arguments[i]] = true; }

	}

	

// Disable individual dates or ranges

// Builds an internal logical test which is run via eval() for efficiency

function CP_addDisabledDates(start, end) {

	if (arguments.length==1) { end=start; }

	if (start==null && end==null) { return; }

	if (this.disabledDatesExpression!="") { this.disabledDatesExpression+= "||"; }

	if (start!=null) { start = parseDate(start); start=""+start.getFullYear()+LZ(start.getMonth()+1)+LZ(start.getDate());}

	if (end!=null) { end=parseDate(end); end=""+end.getFullYear()+LZ(end.getMonth()+1)+LZ(end.getDate());}

	if (start==null) { this.disabledDatesExpression+="(ds<="+end+")"; }

	else if (end  ==null) { this.disabledDatesExpression+="(ds>="+start+")"; }

	else { this.disabledDatesExpression+="(ds>="+start+"&&ds<="+end+")"; }

	}

	

// Set the text to use for the "Today" link

function CP_setTodayText(text) {

	this.todayText = text;

	}
 

// Set the prefix to be added to all CSS classes when writing output

function CP_setCssPrefix(val) { 

	this.cssPrefix = val; 

	}
 

// Show the navigation as an dropdowns that can be manually changed

function CP_showNavigationDropdowns() { this.isShowNavigationDropdowns = (arguments.length>0)?arguments[0]:true; }
 

// Show the year navigation as an input box that can be manually changed

function CP_showYearNavigationInput() { this.isShowYearNavigationInput = (arguments.length>0)?arguments[0]:true; }
 

// Hide a calendar object

function CP_hideCalendar() {

	if (arguments.length > 0) { window.popupWindowObjects[arguments[0]].hidePopup(); }

	else { this.hidePopup(); }

	}
 

// Refresh the contents of the calendar display

function CP_refreshCalendar(index) {

	var calObject = window.popupWindowObjects[index];

	if (arguments.length>1) { 

		calObject.populate(calObject.getCalendar(arguments[1],arguments[2],arguments[3],arguments[4],arguments[5]));

		}

	else {

		calObject.populate(calObject.getCalendar());

		}

	calObject.refresh();

	}
 

// Populate the calendar and display it

function CP_showCalendar(anchorname) {

	if (arguments.length>1) {

		if (arguments[1]==null||arguments[1]=="") {

			this.currentDate=new Date();

			}

		else {

			this.currentDate=new Date(parseDate(arguments[1]));

			}

		}

	this.populate(this.getCalendar());

	this.showPopup(anchorname);

	}
 

// Simple method to interface popup calendar with a text-entry box

function CP_select(inputobj, linkname, format) {

	var selectedDate=(arguments.length>3)?arguments[3]:null;

	if (!window.getDateFromFormat) {

		alert("calendar.select: To use this method you must also include 'date.js' for date formatting");

		return;

		}

	if (this.displayType!="date"&&this.displayType!="week-end") {

		alert("calendar.select: This function can only be used with displayType 'date' or 'week-end'");

		return;

		}

	if (inputobj.type!="text" && inputobj.type!="hidden" && inputobj.type!="textarea") { 

		alert("calendar.select: Input object passed is not a valid form input object"); 

		window.CP_targetInput=null;

		return;

		}

	if (inputobj.disabled) { return; } // Can't use calendar input on disabled form input!

	window.CP_targetInput = inputobj;

	window.CP_calendarObject = this;

	this.currentDate=null;

	var time=0;

	if (selectedDate!=null) {

		time = getDateFromFormat(selectedDate,format)

		}

	else if (inputobj.value!="") {

		time = getDateFromFormat(inputobj.value,format);

		}

	if (selectedDate!=null || inputobj.value!="") {

		if (time==0) { this.currentDate=null; }

		else { this.currentDate=new Date(time); }

		}

	window.CP_dateFormat = format;

	this.showCalendar(linkname);

	}

	

// Get style block needed to display the calendar correctly

function getCalendarStyles() {

	var result = "";

	var p = "";

	if (this!=null && typeof(this.cssPrefix)!="undefined" && this.cssPrefix!=null && this.cssPrefix!="") { p=this.cssPrefix; }

	result += "<STYLE>\n";

	result += "."+p+"cpYearNavigation,."+p+"cpMonthNavigation { background-color:#C0C0C0; text-align:center; vertical-align:center; text-decoration:none; color:#000000; font-weight:bold; }\n";

	result += "."+p+"cpDayColumnHeader, ."+p+"cpYearNavigation,."+p+"cpMonthNavigation,."+p+"cpCurrentMonthDate,."+p+"cpCurrentMonthDateDisabled,."+p+"cpOtherMonthDate,."+p+"cpOtherMonthDateDisabled,."+p+"cpCurrentDate,."+p+"cpCurrentDateDisabled,."+p+"cpTodayText,."+p+"cpTodayTextDisabled,."+p+"cpText { font-family:arial; font-size:8pt; }\n";

	result += "TD."+p+"cpDayColumnHeader { text-align:right; border:solid thin #C0C0C0;border-width:0px 0px 1px 0px; }\n";

	result += "."+p+"cpCurrentMonthDate, ."+p+"cpOtherMonthDate, ."+p+"cpCurrentDate  { text-align:right; text-decoration:none; }\n";

	result += "."+p+"cpCurrentMonthDateDisabled, ."+p+"cpOtherMonthDateDisabled, ."+p+"cpCurrentDateDisabled { color:#D0D0D0; text-align:right; text-decoration:line-through; }\n";

	result += "."+p+"cpCurrentMonthDate, .cpCurrentDate { color:#000000; }\n";

	result += "."+p+"cpOtherMonthDate { color:#808080; }\n";

	result += "TD."+p+"cpCurrentDate { color:white; background-color: #C0C0C0; border-width:1px; border:solid thin #800000; }\n";

	result += "TD."+p+"cpCurrentDateDisabled { border-width:1px; border:solid thin #FFAAAA; }\n";

	result += "TD."+p+"cpTodayText, TD."+p+"cpTodayTextDisabled { border:solid thin #C0C0C0; border-width:1px 0px 0px 0px;}\n";

	result += "A."+p+"cpTodayText, SPAN."+p+"cpTodayTextDisabled { height:20px; }\n";

	result += "A."+p+"cpTodayText { color:black; }\n";

	result += "."+p+"cpTodayTextDisabled { color:#D0D0D0; }\n";

	result += "."+p+"cpBorder { border:solid thin #808080; }\n";

	result += "</STYLE>\n";

	return result;

	}
 

// Return a string containing all the calendar code to be displayed

function CP_getCalendar() {

	var now = new Date();

	// Reference to window

	if (this.type == "WINDOW") { var windowref = "window.opener."; }

	else { var windowref = ""; }

	var result = "";

	// If POPUP, write entire HTML document

	if (this.type == "WINDOW") {

		result += "<HTML><HEAD><TITLE>Calendar</TITLE>"+this.getStyles()+"</HEAD><BODY MARGINWIDTH=0 MARGINHEIGHT=0 TOPMARGIN=0 RIGHTMARGIN=0 LEFTMARGIN=0>\n";

		result += '<CENTER><TABLE WIDTH=100% BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0>\n';

		}

	else {

		result += '<TABLE CLASS="'+this.cssPrefix+'cpBorder" WIDTH=144 BORDER=1 BORDERWIDTH=1 CELLSPACING=0 CELLPADDING=1>\n';

		result += '<TR><TD ALIGN=CENTER>\n';

		result += '<CENTER>\n';

		}

	// Code for DATE display (default)

	// -------------------------------

	if (this.displayType=="date" || this.displayType=="week-end") {

		if (this.currentDate==null) { this.currentDate = now; }

		if (arguments.length > 0) { var month = arguments[0]; }

			else { var month = this.currentDate.getMonth()+1; }

		if (arguments.length > 1 && arguments[1]>0 && arguments[1]-0==arguments[1]) { var year = arguments[1]; }

			else { var year = this.currentDate.getFullYear(); }

		var daysinmonth= new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);

		if ( ( (year%4 == 0)&&(year%100 != 0) ) || (year%400 == 0) ) {

			daysinmonth[2] = 29;

			}

		var current_month = new Date(year,month-1,1);

		var display_year = year;

		var display_month = month;

		var display_date = 1;

		var weekday= current_month.getDay();

		var offset = 0;

		

		offset = (weekday >= this.weekStartDay) ? weekday-this.weekStartDay : 7-this.weekStartDay+weekday ;

		if (offset > 0) {

			display_month--;

			if (display_month < 1) { display_month = 12; display_year--; }

			display_date = daysinmonth[display_month]-offset+1;

			}

		var next_month = month+1;

		var next_month_year = year;

		if (next_month > 12) { next_month=1; next_month_year++; }

		var last_month = month-1;

		var last_month_year = year;

		if (last_month < 1) { last_month=12; last_month_year--; }

		var date_class;

		if (this.type!="WINDOW") {

			result += "<TABLE WIDTH=144 BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0>";

			}

		result += '<TR>\n';

		var refresh = windowref+'CP_refreshCalendar';

		var refreshLink = 'javascript:' + refresh;

		if (this.isShowNavigationDropdowns) {

			result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="78" COLSPAN="3"><select CLASS="'+this.cssPrefix+'cpMonthNavigation" name="cpMonth" onChange="'+refresh+'('+this.index+',this.options[this.selectedIndex].value-0,'+(year-0)+');">';

			for( var monthCounter=1; monthCounter<=12; monthCounter++ ) {

				var selected = (monthCounter==month) ? 'SELECTED' : '';

				result += '<option value="'+monthCounter+'" '+selected+'>'+this.monthNames[monthCounter-1]+'</option>';

				}

			result += '</select></TD>';

			result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="10">&nbsp;</TD>';
 

			result += '<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="56" COLSPAN="3"><select CLASS="'+this.cssPrefix+'cpYearNavigation" name="cpYear" onChange="'+refresh+'('+this.index+','+month+',this.options[this.selectedIndex].value-0);">';

			for( var yearCounter=year-this.yearSelectStartOffset; yearCounter<=year+this.yearSelectStartOffset; yearCounter++ ) {

				var selected = (yearCounter==year) ? 'SELECTED' : '';

				result += '<option value="'+yearCounter+'" '+selected+'>'+yearCounter+'</option>';

				}

			result += '</select></TD>';

			}

		else {

			if (this.isShowYearNavigation) {

				result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="10"><A CLASS="'+this.cssPrefix+'cpMonthNavigation" HREF="'+refreshLink+'('+this.index+','+last_month+','+last_month_year+');">&lt;</A></TD>';

				result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="58"><SPAN CLASS="'+this.cssPrefix+'cpMonthNavigation">'+this.monthNames[month-1]+'</SPAN></TD>';

				result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="10"><A CLASS="'+this.cssPrefix+'cpMonthNavigation" HREF="'+refreshLink+'('+this.index+','+next_month+','+next_month_year+');">&gt;</A></TD>';

				result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="10">&nbsp;</TD>';
 

				result += '<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="10"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="'+refreshLink+'('+this.index+','+month+','+(year-1)+');">&lt;</A></TD>';

				if (this.isShowYearNavigationInput) {

					result += '<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="36"><INPUT NAME="cpYear" CLASS="'+this.cssPrefix+'cpYearNavigation" SIZE="4" MAXLENGTH="4" VALUE="'+year+'" onBlur="'+refresh+'('+this.index+','+month+',this.value-0);"></TD>';

					}

				else {

					result += '<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="36"><SPAN CLASS="'+this.cssPrefix+'cpYearNavigation">'+year+'</SPAN></TD>';

					}

				result += '<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="10"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="'+refreshLink+'('+this.index+','+month+','+(year+1)+');">&gt;</A></TD>';

				}

			else {

				result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="22"><A CLASS="'+this.cssPrefix+'cpMonthNavigation" HREF="'+refreshLink+'('+this.index+','+last_month+','+last_month_year+');">&lt;&lt;</A></TD>\n';

				result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="100"><SPAN CLASS="'+this.cssPrefix+'cpMonthNavigation">'+this.monthNames[month-1]+' '+year+'</SPAN></TD>\n';

				result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="22"><A CLASS="'+this.cssPrefix+'cpMonthNavigation" HREF="'+refreshLink+'('+this.index+','+next_month+','+next_month_year+');">&gt;&gt;</A></TD>\n';

				}

			}

		result += '</TR></TABLE>\n';

		result += '<TABLE WIDTH=120 BORDER=0 CELLSPACING=0 CELLPADDING=1 ALIGN=CENTER>\n';

		result += '<TR>\n';

		for (var j=0; j<7; j++) {
 

			result += '<TD CLASS="'+this.cssPrefix+'cpDayColumnHeader" WIDTH="14%"><SPAN CLASS="'+this.cssPrefix+'cpDayColumnHeader">'+this.dayHeaders[(this.weekStartDay+j)%7]+'</TD>\n';

			}

		result += '</TR>\n';

		for (var row=1; row<=6; row++) {

			result += '<TR>\n';

			for (var col=1; col<=7; col++) {

				var disabled=false;

				if (this.disabledDatesExpression!="") {

					var ds=""+display_year+LZ(display_month)+LZ(display_date);

					eval("disabled=("+this.disabledDatesExpression+")");

					}

				var dateClass = "";

				if ((display_month == this.currentDate.getMonth()+1) && (display_date==this.currentDate.getDate()) && (display_year==this.currentDate.getFullYear())) {

					dateClass = "cpCurrentDate";

					}

				else if (display_month == month) {

					dateClass = "cpCurrentMonthDate";

					}

				else {

					dateClass = "cpOtherMonthDate";

					}

				if (disabled || this.disabledWeekDays[col-1]) {

					result += '	<TD CLASS="'+this.cssPrefix+dateClass+'"><SPAN CLASS="'+this.cssPrefix+dateClass+'Disabled">'+display_date+'</SPAN></TD>\n';

					}

				else {

					var selected_date = display_date;

					var selected_month = display_month;

					var selected_year = display_year;

					if (this.displayType=="week-end") {

						var d = new Date(selected_year,selected_month-1,selected_date,0,0,0,0);

						d.setDate(d.getDate() + (7-col));

						selected_year = d.getYear();

						if (selected_year < 1000) { selected_year += 1900; }

						selected_month = d.getMonth()+1;

						selected_date = d.getDate();

						}

					result += '	<TD CLASS="'+this.cssPrefix+dateClass+'"><A HREF="javascript:'+windowref+this.returnFunction+'('+selected_year+','+selected_month+','+selected_date+');'+windowref+'CP_hideCalendar(\''+this.index+'\');" CLASS="'+this.cssPrefix+dateClass+'">'+display_date+'</A></TD>\n';

					}

				display_date++;

				if (display_date > daysinmonth[display_month]) {

					display_date=1;

					display_month++;

					}

				if (display_month > 12) {

					display_month=1;

					display_year++;

					}

				}

			result += '</TR>';

			}

		var current_weekday = now.getDay() - this.weekStartDay;

		if (current_weekday < 0) {

			current_weekday += 7;

			}

		result += '<TR>\n';

		result += '	<TD COLSPAN=7 ALIGN=CENTER CLASS="'+this.cssPrefix+'cpTodayText">\n';

		if (this.disabledDatesExpression!="") {

			var ds=""+now.getFullYear()+LZ(now.getMonth()+1)+LZ(now.getDate());

			eval("disabled=("+this.disabledDatesExpression+")");

			}

		if (disabled || this.disabledWeekDays[current_weekday+1]) {

			result += '		<SPAN CLASS="'+this.cssPrefix+'cpTodayTextDisabled">'+this.todayText+'</SPAN>\n';

			}

		else {

			result += '		<A CLASS="'+this.cssPrefix+'cpTodayText" HREF="javascript:'+windowref+this.returnFunction+'(\''+now.getFullYear()+'\',\''+(now.getMonth()+1)+'\',\''+now.getDate()+'\');'+windowref+'CP_hideCalendar(\''+this.index+'\');">'+this.todayText+'</A>\n';

			}

		result += '		<BR>\n';

		result += '	</TD></TR></TABLE></CENTER></TD></TR></TABLE>\n';

	}
 

	// Code common for MONTH, QUARTER, YEAR

	// ------------------------------------

	if (this.displayType=="month" || this.displayType=="quarter" || this.displayType=="year") {

		if (arguments.length > 0) { var year = arguments[0]; }

		else { 

			if (this.displayType=="year") {	var year = now.getFullYear()-this.yearSelectStartOffset; }

			else { var year = now.getFullYear(); }

			}

		if (this.displayType!="year" && this.isShowYearNavigation) {

			result += "<TABLE WIDTH=144 BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0>";

			result += '<TR>\n';

			result += '	<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="22"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="javascript:'+windowref+'CP_refreshCalendar('+this.index+','+(year-1)+');">&lt;&lt;</A></TD>\n';

			result += '	<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="100">'+year+'</TD>\n';

			result += '	<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="22"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="javascript:'+windowref+'CP_refreshCalendar('+this.index+','+(year+1)+');">&gt;&gt;</A></TD>\n';

			result += '</TR></TABLE>\n';

			}

		}

		

	// Code for MONTH display 

	// ----------------------

	if (this.displayType=="month") {

		// If POPUP, write entire HTML document

		result += '<TABLE WIDTH=120 BORDER=0 CELLSPACING=1 CELLPADDING=0 ALIGN=CENTER>\n';

		for (var i=0; i<4; i++) {

			result += '<TR>';

			for (var j=0; j<3; j++) {

				var monthindex = ((i*3)+j);

				result += '<TD WIDTH=33% ALIGN=CENTER><A CLASS="'+this.cssPrefix+'cpText" HREF="javascript:'+windowref+this.returnMonthFunction+'('+year+','+(monthindex+1)+');'+windowref+'CP_hideCalendar(\''+this.index+'\');" CLASS="'+date_class+'">'+this.monthAbbreviations[monthindex]+'</A></TD>';

				}

			result += '</TR>';

			}

		result += '</TABLE></CENTER></TD></TR></TABLE>\n';

		}

	

	// Code for QUARTER display

	// ------------------------

	if (this.displayType=="quarter") {

		result += '<BR><TABLE WIDTH=120 BORDER=1 CELLSPACING=0 CELLPADDING=0 ALIGN=CENTER>\n';

		for (var i=0; i<2; i++) {

			result += '<TR>';

			for (var j=0; j<2; j++) {

				var quarter = ((i*2)+j+1);

				result += '<TD WIDTH=50% ALIGN=CENTER><BR><A CLASS="'+this.cssPrefix+'cpText" HREF="javascript:'+windowref+this.returnQuarterFunction+'('+year+','+quarter+');'+windowref+'CP_hideCalendar(\''+this.index+'\');" CLASS="'+date_class+'">Q'+quarter+'</A><BR><BR></TD>';

				}

			result += '</TR>';

			}

		result += '</TABLE></CENTER></TD></TR></TABLE>\n';

		}
 

	// Code for YEAR display

	// ---------------------

	if (this.displayType=="year") {

		var yearColumnSize = 4;

		result += "<TABLE WIDTH=144 BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0>";

		result += '<TR>\n';

		result += '	<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="50%"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="javascript:'+windowref+'CP_refreshCalendar('+this.index+','+(year-(yearColumnSize*2))+');">&lt;&lt;</A></TD>\n';

		result += '	<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="50%"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="javascript:'+windowref+'CP_refreshCalendar('+this.index+','+(year+(yearColumnSize*2))+');">&gt;&gt;</A></TD>\n';

		result += '</TR></TABLE>\n';

		result += '<TABLE WIDTH=120 BORDER=0 CELLSPACING=1 CELLPADDING=0 ALIGN=CENTER>\n';

		for (var i=0; i<yearColumnSize; i++) {

			for (var j=0; j<2; j++) {

				var currentyear = year+(j*yearColumnSize)+i;

				result += '<TD WIDTH=50% ALIGN=CENTER><A CLASS="'+this.cssPrefix+'cpText" HREF="javascript:'+windowref+this.returnYearFunction+'('+currentyear+');'+windowref+'CP_hideCalendar(\''+this.index+'\');" CLASS="'+date_class+'">'+currentyear+'</A></TD>';

				}

			result += '</TR>';

			}

		result += '</TABLE></CENTER></TD></TR></TABLE>\n';

		}

	// Common

	if (this.type == "WINDOW") {

		result += "</BODY></HTML>\n";

		}

	return result;

	}
 

</script>

<body>

<form name = "myform">

<input type="text" name="date" id="date" />

<input type = "submit" name = "submit" id="submit" onclick = "calendarpopup();">

</form>

</body>

</html>

Open in new window

0
 

Author Comment

by:Shiva_Kumar
ID: 22661594
Do I have any update....
0
 
LVL 16

Accepted Solution

by:
brad2575 earned 500 total points
ID: 22719964
You have to initialize the date objects, below is the JS code and HTML code that I have used
<script>

var today = new Date();
 

//sets up dates for end date

var defaultEndDate = new Date();

//defaultEndDate = defaultStartDate;
 

var todayDate = formatDate(today, 'M/d/yyyy');  //this is calling function from popupScript.js to format the date

//var cal = new CalendarPopup("calposition1");

		

// this gets todays date and adds one in ASP and then uses the disable date below

var disableDate = new Date('<%=FormatDateTime(DateAdd("w",10,Now()),2)%>'); // w adds weekdays
 

disableDate = formatDate(disableDate, 'M/d/yyyy');
 

// add one to the disabled date so it selectes the first available date.

//var defaultStartDate = new Date('<%=FormatDateTime(DateAdd("d",1,FormatDateTime(DateAdd("w",10,Now()),2)),2)%>'); // w adds weekdays

var defaultStartDate = new Date('<%=Now%>');

defaultStartDate = formatDate(defaultStartDate, 'M/d/yyyy');	//This takes normal date format and puts it in script date format I need
 
 

//This is for start date calander

var cal = new CalendarPopup();  //with no position so it will make a new popup window

cal.showYearNavigation();

cal.setReturnFunction("showDate");

</script>
 

<input type="text" name="ActualCompleteDate" size="10"> 			

					<a href="javascript:(0)" onclick="cal3.select(window.document.form1.ActualCompleteDate,'anchor3','M/d/yyyy'); return false;" name="anchor3" id="anchor3">

						<img src="../images/calendarbutton.gif">

					</a>		

					<script type="text/javascript"><!-- 					

							// do this to make sure if editing fills in the correct date					

							window.document.form1.ActualCompleteDate.value = "<%=ActualCompleteDate%>" //defaultStartDate;						

					//--></script>   

Open in new window

0

Featured Post

Easy Project Management (No User Manual Required)

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now