asked on

Dynamic Calendar ... Not a Pop-up, Not Flash

Looking for a Dynamic Calendar that is not a Pop-up. Similiar to CF_Calendar, nut I do not want Flash either. Need to select one date from Calendar, then move on to next screen.

ASKER CERTIFIED SOLUTION

SidFishes

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JeffHowden

I'd like to second JSCalendar from Dynarch. I've used it in many different settings and am always pleased with how easy it is.

wytcom

Try Kerberos FlatDatePicker - a javascript calendar with event handling.

sulzener

ASKER

Sorry. By dynamic I mean, I want to be able to select a date and have it populate and INPUT text box. All from the same screen. I downloaded the jscalendar, I didn't see any CFML example. Could you post one?

wytcom

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><cfoutput>#apTitle#</cfoutput></title>
<link rel="stylesheet" type="text/css" href="<cfoutput>#apName#.css</cfoutput>">
</head>
<body>


<script type="text/javascript" src="scripts/FlatDatePicker.js"></script>

<input name="dateQueueing" id="dateQueueing" type="hidden" value = "#pageVars.dateQueueing#" />

<script type="text/javascript">
       var dpoDateQueueing = new FlatDatePicker ('dateQueueing', 'utc', false, true, 'EN', '');
       dpoDateQueueing.scriptAction = "unPostedData=true;";
       dpoDateQueueing.Instantiate();
</script>

</body>
</html>

sulzener

ASKER

SidFish or JeffHowden, could you post some simple CFML so I can see how to access the JSCalendar? I'm not too knowledgeable about JavaScript.

SidFishes

You don't actually need to know anything about js to use the tag just make sure your input field (date1 and date2 in this example) is before the Calendar.setup script. Uniquely name your input id's (Start_f_date_c and End_f_date_c) and your done...

<form action="act_SalesReportHandler.cfm" method="post">

Please Select Report Period<br>

<img src="jscalendar-1.0/img.gif" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Date selector"
onmouseover="this.style.background='red';" onmouseout="this.style.background=''" />

<input type="text" name="Date1" id="Start_f_date_c" readonly="1" enabled="no"> Start Date

<script type="text/javascript">
Calendar.setup({
inputField : "Start_f_date_c", // id of the input field
ifFormat : "%B %e, %Y", // format of the input field
button : "f_trigger_c", // trigger for the calendar (button ID)
align : "Tl", // alignment (defaults to "Bl")
singleClick : true
});
</script>
<br>

<img src="jscalendar-1.0/img.gif" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Date selector"
onmouseover="this.style.background='red';" onmouseout="this.style.background=''" />

<input type="text" name="Date2" id="End_f_date_c" readonly="1" enabled="no" > End Date

<script type="text/javascript">
Calendar.setup({
inputField : "End_f_date_c", // id of the input field
ifFormat : "%B %e, %Y", // format of the input field
button : "f_trigger_c", // trigger for the calendar (button ID)
align : "Tl", // alignment (defaults to "Bl")
singleClick : true
});
</script>

<input type="submit" value="Process">
</form>

jduawa

i use this it seems to work well for our applications
http://www.calendarxp.net/pt_pop.shtml

sulzener

ASKER

I think SisFishes answer was best, but his example seemed to be for pup-up. I need CF example for Flat Date picker using jsclaendar. Looked like Kerberos FlatDatePicker will do the job as well. Thanks to all. I will award points to SidFishes. Would still like a CFML example for the Flat Date picker if you have one. Thanks