How to select year in date time picker??

Hello all!!!

I have a date of birth field.
But the date time picker doesnt have an option to select the year.
It shows the current date by default.
If someone has to pick a date of suppose 1985, does he keep on clicking the left arrow in the date time picker.
Please Help me with this.Its Urgent.

Thanks
Regards
Karamvir

Hi Karamvir,

You could switch back to the Joomla datepicker which isn't so pretty but does have a year dropdown.

Bob

PS Docs for the one that ChronoForms uses are here but I don't see anything about a year selector.

Bob

Hi BOb,
Thanks for the response.
Can't we make some changes to include a year drop down in the calender.
Is it possible?
Thanks
Regards
Karamvir

Hi karamvir,

I found an option to let you change the year more easily.

If you open com_chronocontact/libraries/includes/JSCustomClasses.php then near the end you will find a line that includes this code

{ classes: ['dashboard'] }

alter it so that it reads

{ classes: ['dashboard'], navigation: 2  }

and you will have separate month and year selection buttons - not ideal but better.

Bob

Hi karamvir,

I found an option to let you change the year more easily.

If you open com_chronocontact/libraries/includes/JSCustomClasses.php then near the end you will find a line that includes this code

{ classes: ['dashboard'] }

alter it so that it reads

{ classes: ['dashboard'], navigation: 2  }

and you will have separate month and year selection buttons - not ideal but better.

Bob

I inserted the new text and my datetimepicker still is only showing months. Is the new datetimepicker different?
I have tried this:
$MyForm->formparams('datefieldformat') : 'd/m/Y'; ?>' }, { classes: ['alternate', ...], navigation: 2 });
and this:
$MyForm->formparams('datefieldformat') : 'd/m/Y'; ?>' }, { classes: ['dashboard'], navigation: 2 });
and neither work. My calendar still looks like this:

Thanks for any help! I really just need to be able to enter b-days easily.
ben

Hi benblur4,

The date picker is unchanged. You can now enter parameters in a field at the bottom of the Form General Tab though. The default is classes: ['dashboard'], I changed this to classes: ['dashboard'], navigation: 2 and the little clickers under the month and year show up OK.

Bob

Thank you very much! That did the trick. I now have the arrows too.

Is there a way to set a different default year (other than the current year)? If so, how would I go about doing that and would it effect all datetimepickers on a form or could I just change one at a time?
Thanks again for the prompt response!
Ben

Hi benblur,

The docs for the calendar are here I don't see an obvious way of setting a default year - perhaps setting a default value for the input will do the trick?

Bob

I also needed the ability to let users pick the year, and the above info was most welcome. I tested the above solution and while it does work, it was broken in both IE8 and Opera 10.01. It did work as described in Firefox 3.5.7, but as the images above show, the selection arrows for the year and month don't look right and overlap the letters for the days of the week in the top row.

I visited the Aeron calendar website and found a demo for the navigation by year: Advanced navigation (by month or year).

If you would like to achieve the same effect in Chronoforms, and you don't mind the blue and white color scheme, then do the following:

Copy the contents of the alternate.css file and save it as alternate.css in your /components/com_chronocontact/css/ directory.

Next, save the following images to your /components/com_chronocontact/css/ directory:

calendar-icon.gif
calendar.png
calendar-prev.gif
calendar-next.gif
calendar-td.gif
calendar-valid.gif
calendar-hilite.gif

Note: This is completely optional, but I actually created a new directory called "img_alt" in the /components/com_chronocontact/css/ directory and put the above images there to keep everything separate from the default install. If you decide to do the same, don't forget to edit the paths to the images in your alternate.css file.

Now, you need to edit one line in your /components/com_chronocontact/chronocontact.html.php file. Find this on or around line 62 ...

<link rel="stylesheet" href="<?php echo $CF_PATH; ?>components/com_chronocontact/css/calendar2.css" type="text/css" />

Change it to this ...

<link rel="stylesheet" href="<?php echo $CF_PATH; ?>components/com_chronocontact/css/alternate.css" type="text/css" />

Finally, go into your Chronoform form manager and click on the form's name. At the bottom of the General tab, change the last field entitled "Date Fields extras" to this:

classes: ['alternate'],navigation: 2

Save your form and you should now have the new date picker calendar with properly formatted selection buttons for both the month and year.

:)

Hi Grumpster,

Nice solution,

I ran a quick check on IE8 with the Navigation 2 settings - the month and year buttons display with the year slightly misplaced.

With Opera 10.10 I get a PHP snippet in the html $datefieldsnames: Array ( [0] => date_0 ) and no calendar at all :-(

Bob