Board Logo

Fill 2 Dates with one popup
moonchilddave - 10/30/2007 at 04:54 PM

I'm using Tigra Calendar 3.0 and I have the following situation:

My form has 2 dates, a start date and end date - both with calendars and this works. What I'd like to do is if the end date is blank, populate it with the value from the start date when it gets filled in. And then use the second calendar instance to modify this if needed.

Is this even possible?

moonchilddave - 10/30/2007 at 06:00 PM

Actually, what would be ideal is rather than populating the end date with the value picked in the start date would be to have the calendar for the end date START with the value from the start date.

moonchilddave - 10/30/2007 at 07:14 PM

What I have in mind would be something like:


var cal2 = new calendar1(document.forms['reservation'].elements['date_end'],document.forms['reservation'].elements['date_start']);

With the first parameter being the "target" and the second parameter being optional (but if supplied points to where to set the start date of the calendar, ie: the source). But, I would only want the source used IF the target value was empty.

So, for the example above, it would set the calendar start date to the value of "date_start" if the target "date_end" was not filled in, otherwise the calendar would start with whatever was filled in as "date_end". And whatever was selected would populate "date_end" on the form when clicked.

I imagine for this to happen something has to be modified - but not really knowing Javascript all that well, I could really use some help.

Alejo - 11/3/2008 at 04:41 AM

You can simply do something like:

<input name="startdate" type="text" onchange="this.form.enddate.value = this.value; this.form.enddate.focus();">
<input name="enddate" type="text">

then, when the user changes the start date, the end date is filled with the same value and the focus moved to this field.

coppercup - 3/11/2009 at 04:06 PM

Here's a solution in the latest version. Assumes two form fields with ids start_date and end_date.

In the calendar_*.js script file, add this line just inside the f_tcalHide (n_date) function closing bracket (right after line 159 in v4.0.2):


Add this function to in the head of your document:

<script type="text/javascript">
function setEndDate()
var start_date = $("start_date").value;
var end_date = $("end_date").value;
var sdo = new Date(start_date);
var edo = new Date(end_date);
if(end_date == "" || edo < sdo){
$("end_date").value = $("start_date").value;

IMPORTANT: Replace $("start_date") and $("end_date") in the function above with proper references to your two form fields. I'm using the prototype.js library, which allows me to reference my form fields with this short method. (See for more information about Prototype.)

In the html form, add:


to each of the form fields like thus:

<input id="start_date" name="start_date" type="text" value="'.$start_date.'" size="8" onChange="setEndDate()" />

Now, anytime you change either date by selecting from the calendar popup or by manually typing in the field, the end date will be updated to match the start date if:

- the end date is empty
- the end date is less than the start date

FYI - I posting this as a help to others, but may not be available to answer questions.

Also, obviously adding a function call just inside the f_tcalHide (n_date) function in the calendar_*.js file is an easy way to run a callback function once the user has made a selection or simply closed the calendar popup.

Back to forum: