Calendar popup

Hi,

I have read every post on this forum regarding calendar popup button and how to include it in form but I am not able to make it work.

I would appreciate if someone could take a look on provided form code and suggest me how to fix it so I can use Joomla (or any other) calendar JavaScript?

Here is my form code:

<div>
  <span>
  <fieldset>
  <legend>Appointment Time and date</legend>
   <div>
    <span><label for="sellst_time_id0">Appointment Times</label></span>
    <span><select id="sellst_time_id0" name="time" size="8" tabindex="0">
    <option>10.00 to 11.30</option>
    <option>11.30 to 13.00</option>
    <option>13.00 to 14.30</option>
    <option>14.30 to 16.00</option>
    <option>16.00 to 17.30</option>
    <option>17.30 to 19.00</option>
    <option>19.00 to 20.30</option>
    <option>20.30 to 21.30</option>
   </select></span>
   </div><br>
   
   <div>



<?php
mosCommonHTML::loadCalendar();
?>


<input class="inputbox" type="text" id="start_date" name="start_date" value="<?php echo $row->
start_date; ?>" size="11" maxlength="11" />
            <input type="reset" class="button" value="..." onclick="return showCalendar('start_date'
, 'mm-dd-y');" />



    
   </div><br>
   
   
   <div>
    <span><label for="sellst_location_id0">Location options</label></span>
    <span><select id="sellst_location_id0" name="location" size="1" tabindex="1">
    <option>Harley Street</option>
    <option>Streatham</option>
    <option>Home Visit</option>
   </select></span>
   </div>
   
  </fieldset>
  </span>
 </div>
 <div>
  <span>
  <fieldset>
  <legend>Your details</legend>
   <div>
    <span><label for="sellst_title_id0">Title</label></span>
    <span><select id="sellst_title_id0" name="title" size="1" tabindex="2">
    <option>Mr</option>
    <option>Ms</option>
    <option>Miss</option>
    <option>Mrs</option>
    <option>Dr</option>
    <option>Other</option>
   </select></span>
   </div>
   <div>
    <span><label for="txtInp_name_id0">First name</label></span>
    <span><input type="text" id="txtInp_name_id0" name="name" size="30" tabindex="3"></span>
   </div>
   <div>
    <span><label for="txtInp_surname_id0">Surname</label></span>
    <span><input type="text" id="txtInp_surname_id0" name="surname" size="30" tabindex="4"></span>
   </div>
   <div>
    <span><label for="txtInp_lname_id0">Last name</label></span>
    <span><input type="text" id="txtInp_lname_id0" name="lname" size="30" tabindex="5"></span>
   </div>
   <div>
    <span><label for="txtInp_age_id0">Age</label></span>
    <span><input type="text" id="txtInp_age_id0" name="age" size="2" tabindex="6"></span>
   </div>
   <div>
    <span><label for="txtInp_therapy_id0">Desired Therapy</label></span>
    <span><input type="text" id="txtInp_therapy_id0" name="therapy" size="30" tabindex="7"></span>
   </div>
   <div>
    <span><label for="txtInp_email_id0">Email Address</label></span>
    <span><input type="text" id="txtInp_email_id0" name="email" size="30" tabindex="8"></span>
   </div>
   <div>
    <span><label for="txtInp_phone_id0">Telephone</label></span>
    <span><input type="text" id="txtInp_phone_id0" name="phone" size="30" tabindex="9"></span>
   </div>
  </fieldset>
  </span>
 </div>

I am using Joomla 1.0.15 and Chronoforms 2.3.8.
Thank you in advance!<br><br>Post edited by: mihha, at: 2008/04/01 01:58

Hi mihha,

The code posted on the forums for the Joomla 1.0.x calendar looks like this:

<?php
global $mainframe;
$js_path = $mosConfig_live_site.'/includes/js/';
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="'.$js_path.'joomla.javascript.js"></script>');
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="'.$js_path.'calendar/calendar.js"></script>');
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="'.$js_path.'calendar/calendar_mini.js"></script>');
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="'.$js_path.'calendar/lang/calendar-en.js"></script>');
$mainframe->addCustomHeadTag ('<link href="'.$js_path.'calendar/calendar-mos.css" rel="stylesheet" type="text/css" media="screen" />');
?>

Bob

Hi Bob,

I replaced the following from my code:

<?php
mosCommonHTML::loadCalendar();
?>

with code that you provided but still I don't have calendar functionality.

You can see this form at here

I attached my form backup. I would be more than grateful if you could check this code and help me resolve that issue.

[file name=booking.cfbak size=136642]http://www.chronoengine.com/components/com_fireboard/uploaded/files/booking.cfbak[/file]

Hi mihha,

Sorry, I missed a global declaration in there. Try this version:

<?php
global $mainframe, $mosConfig_live_site;
$js_path = $mosConfig_live_site.'/includes/js/';
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="'.$js_path.'joomla.javascript.js"></script>');
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="'.$js_path.'calendar/calendar.js"></script>');
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="'.$js_path.'calendar/calendar_mini.js"></script>');
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="'.$js_path.'calendar/lang/calendar-en.js"></script>');
$mainframe->addCustomHeadTag ('<link href="'.$js_path.'calendar/calendar-mos.css" rel="stylesheet" type="text/css" media="screen" />');
?>

Bob<br><br>Post edited by: GreyHead, at: 2008/04/01 20:17

Hi Bob,

first, it didn't work until I removed

echo $js_path."<br />";

.

After that it work perfect!

Thank you very much for your help!

I am sorry to bother you again.

Could you tell me how to set date representation with this calendar popup. I mean, default returned date is in 'yyyy-mm-dd' format.

I would like to use 'dd.mm.yyyy' format

Hi mihha,

Sorry, I left my debug code in there.

I don't know how the date format works but there are two lines at the end of calendar-en.js that might help

Calendar._TT["DEF_DATE_FORMAT"] = "y-mm-dd";
Calendar._TT["TT_DATE_FORMAT"] = "D, M d";

It looks as though you can make other language changes here too.

Bob

Hi

I'm struggling to get this calendar to work ... Miha, you say you removed some code but I don't see that ... where is it please?
Jon

Hi Jimmy,

The issue is that he had some problem with the path variable, looks like the JS files was not referenced correctly, the whole code is what Bob posted, do you have J1.0 or J1.5 ? the calendar code is different!

Regards,

Max

Hi Max

I have 1.5

It seems to me that my path could be wrong because I see no sign of the part which relates to the calendar in the form html when it's in the browser. my form code is below ...

<div>
  <span>
  <fieldset>
  <legend>Request a Room or Suite</legend>
  <div>
    <span><label for="req_room">Rooms</label></span>
    <select id="req_room" name="room" size="8" tabindex="0">
      <option>Room One</option>
      <option>Room Two</option>
      <option>Room Three</option>
      <option>Room Four</option>
      <option>Room Five</option>
      <option>Room Six</option>
      <option>Room Eight</option>
      <option>Room Nine</option>
      <option>Room Ten</option>
      <option>Room Eleven</option>
      <option>Room Twelve</option>
      <option>Room Thirteen</option>
      <option>Room Fourteen</option>
      <option>Room Eighteen</option>
      <option>Room Twenty One</option>
    </select>
   </div>
   <br>
   <div>
<?php
global $mainframe, $mosConfig_live_site;
$js_path = $mosConfig_live_site.'/includes/js/';
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="'.$js_path.'joomla.javascript.js"></script>');
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="'.$js_path.'calendar/calendar.js"></script>');
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="'.$js_path.'calendar/calendar_mini.js"></script>');
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="'.$js_path.'calendar/lang/calendar-en.js"></script>');
$mainframe->addCustomHeadTag ('<link href="'.$js_path.'calendar/calendar-mos.css" rel="stylesheet" type="text/css" media="screen" />');
?>

<input class="inputbox" type="text" id="arrive_date" name="arrive_date" value="<?php echo $row->
start_date; ?>" size="11" maxlength="11" />
            <input type="reset" class="button" value="..." onClick="return showCalendar('arrive_date'
, 'dd-mm-y');" />
</div><br>
<div>
<input class="inputbox" type="text" id="depart_date" name="depart_date" value="<?php echo $row->
start_date; ?>" size="11" maxlength="11" />
            <input type="reset" class="button" value="..." onClick="return showCalendar('depart_date'
, 'dd-mm-y');" />
</div><br>
   <div>
    <span>
    <label for="options">Other options</label>
    </span>
    <span><select id="options" name="options" size="1" tabindex="1">
    <option>Single</option>
    <option>Twin</option>
    <option>Suite</option>
   </select></span>
   </div>
   
  </fieldset>
  </span>
 </div>
 <div>
  <span>
  <fieldset>
  <legend>Your details, please</legend>
   <div>
    <span><label for="txtInp_name_id0">First name</label></span>
    <span><input type="text" id="txtInp_name_id0" name="name" size="30" tabindex="3"></span>
   </div>
   <div>
    <span><label for="txtInp_lname_id0">Last name</label></span>
    <span><input type="text" id="txtInp_lname_id0" name="lname" size="30" tabindex="5"></span>
   </div>
   <div>
    <span><label for="txtInp_email_id0">Email Address</label></span>
    <span><input type="text" id="txtInp_email_id0" name="email" size="30" tabindex="8"></span>
   </div>
   <div>
    <span><label for="txtInp_phone_id0">Telephone</label></span>
    <span><input type="text" id="txtInp_phone_id0" name="phone" size="30" tabindex="9"></span>
   </div>
  </fieldset>
  </span>
  <input name="submit" type="submit" value="Send request">
 </div>

Edited to add code tags<br><br>Post edited by: GreyHead, at: 2008/04/14 08:59

The thing is, I see that Miha's Calendar works nicely at http://londonfemalehypnotist.co.uk/joomla/booking-appointment.html and was hoping I could just get a copy to help me get started?

I'm not very good with php but I can copy & paste alright!

Any chance please?

Hi Jimmy,

here is may form that uses calendar popup.
I hope that it will help you get started.

If I could only solve how to change date format I would be really grateful.

[file name=booking_appointment.cfbak size=6151]http://www.chronoengine.com/components/com_fireboard/uploaded/files/booking_appointment.cfbak[/file]

Hi Jimmy, I wish that helped you too!!🙂

Mihha, Thank you, to change the date format, put those 2 lines after the loaded calendar files in the code :

<script type="text/javascript">
Calendar._TT["DEF_DATE_FORMAT"] = "y-mm-dd";
Calendar._TT["TT_DATE_FORMAT"] = "D, M d";
</script>

This will overwrite the loaded formats by the calendar default JS files!

Regards

Max

Thanks mihha, that works! Just had to change 'calendar-en.js' to 'calendar-en-GB.js' and bingo.

Incidentally, I just flipped DD and MM around and that worked too. Something to do with my 'calendar-en-GB.js' perhaps?

Will post my Hotel reservation Request Form when I've tarted it up a bit.

Thanks again. Next time I need a London Female Hypnotist, you're the man!

Thanks Max, Looks like I'm okay.

Do you think my calendar-en-GB.js did the trick for the date? I'm only guessing.

Max,

thank you very much!
Now I can finally have date format as I want!

My finished form is here ...

what do you think?

Nice.
Would you mind to share your form here?

Of course. Attached. All credit and thanks to you, Mihha.

[[Attachment no longer available.]]

Can't seem to download this attachment.

Any help would be appreciated.

Thanks

Hi de8auch,

Sorry the attachment was to the old FireBoard forum and is no longer available. You can see the form on his site though and look at the source code.

Bob