Home Downloads Forums Shop FAQs Blog Contact Demo Login

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Forums

Calendar popup

mi
mihha 01 Apr, 2008
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
Gr
GreyHead 01 Apr, 2008
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
mi
mihha 01 Apr, 2008
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]
Gr
GreyHead 01 Apr, 2008
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
mi
mihha 01 Apr, 2008
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!
mi
mihha 02 Apr, 2008
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
Gr
GreyHead 02 Apr, 2008
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
Ji
JimmyHill 12 Apr, 2008
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
Max_admin
Max_admin 12 Apr, 2008
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
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
Ji
JimmyHill 13 Apr, 2008
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
Ji
mi
mihha 13 Apr, 2008
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]
Max_admin
Max_admin 13 Apr, 2008
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
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
Ji
JimmyHill 13 Apr, 2008
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!
Ji
JimmyHill 13 Apr, 2008
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.
mi
mihha 13 Apr, 2008
Max,

thank you very much!
Now I can finally have date format as I want!
Ji
JimmyHill 14 Apr, 2008
My finished form is here ...

what do you think?
mi
mihha 14 Apr, 2008
Nice.
Would you mind to share your form here?
Ji
JimmyHill 14 Apr, 2008
Of course. Attached. All credit and thanks to you, Mihha.

[[Attachment no longer available.]]
de
de8auch 30 Oct, 2008
Can't seem to download this attachment.

Any help would be appreciated.

Thanks
Gr
GreyHead 30 Oct, 2008
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
This topic is locked and no more replies can be posted.
Terms of Use Privacy Policy Business Partners

2Checkout.com

2CheckOut.com Inc. (Ohio, USA) is an authorized retailer for goods and services provided by ChronoEngine.com

© 2006 - 2024 ChronoEngine.com