Jump to content

JS Popup Calendar - HELP

sawade

By sawade
in Javascript Help

 Share

Recommended Posts

sawade Member

sawade

Posted
Posted

I have a functioning js popup calendar.  The value selected on the calendar currently populates in an input field.  What I want to do is make the field hidden (which I can do easily) and make the value appear in regular text beside the hidden field.  I am having troubles getting the value to appear as text.  I also want the text value to be formatted the same way as the PHP variable $full_date.  But I do want the initial value also.  I am a js beginner, if that helps.

 

PHP variables are used to help pass the values into a db and so on and so forth.

 

Thank you!!!

:P

 

PHP variables

 

$date = $_POST["date1"];
$full_date = date('l, F d, Y', strtotime($date));

 

JAVASCRIPT

 

<A HREF="#" onClick="cal.select(document.forms['addappt'].date1,'anchor1','MM/dd/yyyy'); return false;"
   NAME="anchor1" ID="anchor1"><img src="calendar.png" /></A><INPUT TYPE="text" NAME="date1" VALUE="" SIZE="25" />

Link to comment
Share on other sites
sawade Member

sawade

Posted
  • Author
Posted

Is there a way with js to do an automatic refresh once a the variable is filled?

 

For example....

 

<td><a href="#" onClick="cal.select(document.forms['addappt'].date1,'anchor1','MM/dd/yyyy'); return false;"
   name="anchor1" id="anchor1"><img src="calendar.png" /></a><input type="hidden" name="date1" value="" size="10" />
<?php if (!empty($date)) echo $full_date; ?></td>

 

Once date1 has a value to have the page refresh.  That way the php code should run and echo out the value???

Link to comment
Share on other sites
  • 2 weeks later...
seventheyejosh Advanced Member

seventheyejosh

Posted
Posted

What calender are you using? There is most likely a callback function firing when a date is chosen. If you use that, you can just take the value of the textfield, and move it to another textfield.

 

Check the documentation on what you got. This is kinda how it would be:

 


--snip--

success:function(){

     document.getElementById('sourceId').disabled=true; //no quotes on the bool
     document.getElementById('targetId').value=document.getElementById('sourceId').value;

}

 

Although I'd just use the jquery + UI calender (http://jqueryui.com/home), and something like this:

 


$('#sourceId').datepicker({
   onSelect: function(dateText, inst) {

       $("#sourceId").attr("disabled",true);
       $("#targetId").val($("#sourceId").val());
   }
});

 

you may need to look at the manual close method with the latter, uusing the instance of the calender to kill it.

Link to comment
Share on other sites
sawade Member

sawade

Posted
  • Author
Posted

I read through the code and I think this is what you are asking about...

 

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

 

// 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" onmouseup="CP_stop(event)" 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" onmouseup="CP_stop(event)" 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';
}

 

The code I am using.....

 

// Author: Matt Kruse <matt@mattkruse.com>
// WWW: http://www.mattkruse.com/

Link to comment
Share on other sites
sawade Member

sawade

Posted
  • Author
Posted

So basically I just want it to give me 2 values.  One to go to the hidden field and the 2nd to be displayed as text (not in a textbox).  I know it's doable I've seen it, I am just not good with js to know how to implement it into this pre-existing code.

 

Thank you for the help.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.