Forums

Hello, first time poster.

I'm curious. I've noticed in my Date picker that the dates only go to 30 for each month.

I'm not sure if this is a prob with the calendar.js, my language settings or a bug.

I've noticed this on other date pickers throughout the forums and I'm really interested in solving this one because it's got me stumped.

I *could* go through and work out all the javascript myself I guess but I'm curious if someone has a work around or has noticed this.

Latest version of Chronoforms

Joomla 1.5.7


Hope it's a settings issue because it's the last thing I need to finish before moving over to the database insertion stage and then bidding my client.

Thank you and Cheers.

Hi de8auch,

I see the problem now, never observed this and nobody else mentioned it, I think this calendar library may be replaced by the next release if I didn't manage to make some fixes to it!

Cheers
Max

I guess I should search out for my own library calendar.js file then.

If you have any suggestions I would really appreciate it.

I'm lost in 5 or six tabs of javascript calendars to find a script that will work.

Thanks for the quick reply.

I was going to use this one http://www.electricprism.com/aeron/calendar/

but it was making problems with the wizard, will give it another try soon because it seems better than the one we have now!

Cheers
Max

Hi de8auch,

It's not as pretty as the ones that Max is looking at but there's a perfectly good calendar script already packaged with Joomla that you can call with just a few lines of code.

Bob

oh yeah?

I've been around these boards looking for the simple way to do just that. I've seen the posts and I'm unsure exactly which steps I would take.

Here's my input code so far:

<div  class="form_item"><div class="form_element cf_heading"><h1 id="" class="cf_text">Get a Free Quote</h1></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Name:</label><input class="cf_inputbox required validate-alpha" maxlength="150" size="30" id="text_1" name="text_1" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Email:</label><input class="cf_inputbox required validate-email" maxlength="150" size="30" id="text_2" name="text_2" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Phone:</label><input class="cf_inputbox required" maxlength="150" size="30" id="text_4" name="text_4" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_dropdown"><label class="cf_label">Best Time to Call:</label><select class="cf_inputbox" id="select_5" size="1" name="select_5"><option value="Morning">Morning</option><option value="Afternoon">Afternoon</option><option value="Evening">Evening</option></select></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_datetimepicker"><label class="cf_label">Move Date:</label><input onclick="new Calendar(this);" class="cf_datetime required" size="20" id="date_8" name="date_8" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">From zipcode:</label><input class="cf_inputbox validate-number" maxlength="150" size="30" id="text_10" name="text_10" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">To zipcode:</label><input class="cf_inputbox validate-number" maxlength="150" size="30" id="text_11" name="text_11" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_dropdown"><label class="cf_label">Select Number of Rooms:</label><select class="cf_inputbox" id="select_12" size="1" name="select_12"><option value="Studio">Studio</option><option value="One Bedroom">One Bedroom</option><option value="Two Bedroom">Two Bedroom</option><option value="Three Bedroom">Three Bedroom</option><option value="Four bedroom">Four bedroom</option><option value="Five Bedroom or More">Five Bedroom or More</option></select></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_dropdown"><label class="cf_label">Level:</label><select class="cf_inputbox" id="select_13" size="1" name="select_13"><option value="Ground Floor">Ground Floor</option><option value="1st Floor">1st Floor</option><option value="2nd Floor">2nd Floor</option><option value="3rd Floor">3rd Floor</option><option value="4th Floor">4th Floor</option><option value="5th Floor or Higher">5th Floor or Higher</option></select></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_dropdown"><label class="cf_label">Access:</label><select class="cf_inputbox" id="select_14" size="1" name="select_14"><option value="Ground">Ground</option><option value="Stairs">Stairs</option><option value="Elevator">Elevator</option></select></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textarea"><label class="cf_label">List your heaviest / biggest items:</label><textarea class="cf_inputbox required" rows="3" id="text_16" cols="30" name="text_16"></textarea></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textarea"><label class="cf_label">How did you hear about us?</label><textarea class="cf_inputbox" rows="3" id="text_22" cols="30" name="text_22"></textarea></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textarea"><label class="cf_label">Message / Comments:</label><textarea class="cf_inputbox" rows="3" id="text_23" cols="30" name="text_23"></textarea></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_button"><input value="Send" name="undefined" type="submit"></div><div class="clear"> </div></div>

I've tried a few ways to get my javascript into this section:

Form JavaScript:
(without the script tags)

All wiht no luck.

How do I call the Joomla calendar to do this so my dates are correct?

Hi de8auch,

You need to include the calendar class in your form html just once

JHTML::_('behavior.calendar');

the to include a calendar as a form input you need some version of this

    <div class='oneField' >
<label for='dob' class='label' >Date of birth</label>

    <span id='showDoBCalendar'><img class='calendar' src='/templates/system/images/calendar.png'
        alt='calendar' id='showDoBCalendar_img' />
    <input type='text' id='dob' name='dob'
    size='20' class='required validate-date-au' value='' /></span>dd/mm/yyyy</div>
    <script type='text/javascript' >
    Calendar.setup({
        inputField  : 'dob',
        ifFormat    : '%d/%m/%Y',
        button      : 'showDoBCalendar',
        date        : new Date(),
        range       : [1909,1993]
    });
    </script>

Note that you heed an input field to collect the results as well as the calendar.

You can have multiple calendars in one form too, just repeat the code with unique ids.

Bob

Later: corrected two typos identified later in the thread.

K, hey thanks alot.

I've searched out a couple of your other posts on this issue.

I'm having a problem with adding a second <input> field to hold the value that the calendar sends.

I can't really get the Calendar pic to launch a pop up.

It's strange because I think I have it set the same as the original cf_datepicker element that the chronoforms generated.

Though not really all that strange and I'm sure not a problem with the workings of the code. Just an indicator of the learning curve and my position on the bell chart.

Here's my code for the original form: (which pulls up a pop up and has an additional field that I thought would be the pass to input box)

<div  class="form_item">
<div class="form_element cf_datetimepicker">
<label class="cf_label">Move Date:</label>
<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="Calendar" onclick="return showCalendar('start_date'
, 'mm-dd-y');" />
<input onclick="new Calendar(this);" class="cf_datetime required" size="20" id="date_8" name="date_8" type="text">

And Here's what I've worked up so far. (The dates will validate, so that's a good thing)

<div class="form_item">
 <?php JHTML::_('behavior.calendar'); ?> 
         <div class="form_element cf_datetimepicker">
<label for='dob' class='label' >Move Date:</label>
    <span id='showDoBCalendar'>
         <input type='text' id='dob' name='dob' size='20' class='$class validate-date-au' value=''/>
<img class='calendar' src='/templates/system/images/calendar.png' alt='calendar' id='showDoBCalendar".$i."img' />
    </span>dd/mm/yyyy
          </div>
  <script type='text/javascript' >
    Calendar.setup({
        inputField  : 'dob',
        ifFormat    : '%d/%m/%Y',
        button      : 'showDoBCalendar',
        date        : new Date(),
        range       : [1909,1993]
    });
    </script>
</div>

I've grabbed a few tutorials on xhtml and I'm thinking I need to get my head around some Java as well.

I did look at the fancy calendars on the link Max PAYNE posted. very swanky, mental note for later.

Anyhow. Thank you for your reply.

try this from Joomla forums:

<?php JHTML::_('behavior.calendar'); ?>
<input type="text" name="fromdate" id="fromdate" readonly="true" />
<input type="reset" value="..." onclick="return showCalendar('fromdate','%Y-%m-%d');" />

Hi de*auch,

I think this is my fault. Just looked at your code and I've left an unnecessary snippet in place

<img class='calendar' src='/templates/system/images/calendar.png' alt='calendar' id='showDoBCalendar".$i."img' />

should be

<img class='calendar' src='/templates/system/images/calendar.png' alt='calendar' id='showDoBCalendar' />

The id of the image field then matches the 'button' entry in the calendar setup. (The original code I used was part of a form with eight subforms set up with a php loop - hence the $i to distinguish the date of birth fields.)

The $class in the previous line also needs replacing with 'required'.

Max's version will work equall;y well but gives you less control over the calendar parameters.

Bob

Hello Grey and Max.

Below is my code based on what's been understood so far.
I get the calendar image, validation. No pop-up calendar.

This is a copy of your DOB calendar. I'm going to need to not limit dates. I would have to take those out of the js in this code correct?

<div class="form_item">
 <?php JHTML::_('behavior.calendar'); ?> 
         <div class="form_element cf_datetimepicker">
<label for='dob' class='label' >Move Date:</label>
    <span id='showDoBCalendar'>
         <input type='text' id='dob' name='dob' size='20' class='required validate-date-au' value=''/>
<img class='calendar' src='/templates/system/images/calendar.png' alt='calendar' id='showDoBCalendar' />
    </span>dd/mm/yyyy
         </div> 
  <script type='text/javascript' >
    Calendar.setup({
        inputField  : 'dob',
        ifFormat    : '%d/%m/%Y',
        button      : 'showDoBCalendar',
        date        : new Date(),
        range       : [1909,1993]
    });
    </script>
</div>
<div class="clear"> </div>
</div>

Hi de8auch,

my code above will just show a new calendar for you, that's apart from the built in CF calendar, so remove the CF one and use my code above or Bob's one if you managed to get it working, that's it!

Cheers
Max

Hi de8auch,

I pasted the code form your last posting into an empty form and it works perfectly. Plese check for JavaScript conflicts with other scripts on the page.

Yes, to remove the range you can either replace it with a better one for your application or remove the config line.

Bob

Bob:

I have incorporated this code in Chronoconnectivity as you suggested (in a different post), but mine does not look anything like the one you show is this thread. It appears that my calendar is picking up css info from my template, which unfortunately makes a lot of it transparent. See the attached image.

Did you find a way to apply a specific css file, or is the css info from your template simply more compatible with the calendar than mine?

I am also having trouble getting it to position near the text box. I have tried most of the options in the documentation from dynarch.com.

Thanks,
George

BTW, once I get this Chronoconnectivity code finalized, I intend to upload it here as some sample code. It is just what we needed.

Hi gporterfield,

if the template CSS interferes with the Joomla calendar then you will need to edit your template css, I have no other idea to fix this! regarding the position, I think it will also be a css conflict, you better change your template and make another test!


Regards
Max

Hi gporterfield,

Sorry, I've been away on the road for a week and off-line.

The example I showed is running in my test Joomla set up which is a clean(ish) 1.5.7 install using the default rhuk_milkyway template.

As soon as the site gets more complex or you use custom templates you are likely to run into conflicts like this. The only solution that I know is - as Max says - to dig in with FireBug or something similar and work out exactly what is causing the problem. It's surprisingly easy to get half-a dozen css files competing on the same page :-(

Bob

Hi all,

I can give you a fix that partially solves the problem:

Edit line 199 of /components/com_chronocontact/js/calendar.js
Change 30 for 31.

After that patch you will see right number of days in the current month.
Unfortunately previous month (the days in grey) will have always 31 days :-(

At least it is a bit better

bighen

Thank you for the good hack!🙂 I think that's good but not the best, will look into the issue before the new release!

Max