Shiva_Kumar
asked on
javascript to pop up the calendar with date n time in the form
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
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
ASKER
I am new to JS and its very confusing. Could you pls suggest some recommendation/usage of this code.
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.
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.
ASKER
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.
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"> </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+');"><</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+');">></A></TD>';
result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="10"> </TD>';
result += '<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="10"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="'+refreshLink+'('+this.index+','+month+','+(year-1)+');"><</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)+');">></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+');"><<</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+');">>></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)+');"><<</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)+');">>></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))+');"><<</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))+');">>></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>ASKER
Do I have any update....
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://www.mattkruse.com/javascript/calendarpopup/