Buy Now
Sign in

FAQ search

Date control using CFv5 date picker element

Details
Published: Monday, 07 April 2014 13:13

In CFv5, you can control the dates open using the Datepicker element ‘Extra params’ box, here is a list of some of the available settings.

Update: more recent versions of ChronoForms have an Advanced tab in the DatePicker element settings. This tab has boxes where you can enter some of these settings directly. If you use these boxes only enter the part after the = in examples below. 

Start date

In order to disable all dates before a specific date, you can enter this in the ‘Extra params’ box: 

data-start_date=25-03-2014

Please note that the start date format must be in the same format that is set in the Datepicker 'Format' setting.

You can also use PHP to build a dynamic start date.

For example, this will set the start date to today.

data-start_date=<?php echo date("d-m-Y"); ?>

And to have this set on page load you need to use this code in a "Load JS" action:

jQuery(document).ready(function($){
$("#field_id").data("start_date", '<?php echo date("d-m-Y"); ?>');
});

And this will set the date to tomorrow:

data-start_date=<?php $d = new DateTime('tomorrow'); echo $d->format("d-m-Y"); ?>

End date

data-end_date=28-03-2014

Open days

In order to limit the available days to specific week days, you can use something like this:

data-open_days=[6,0]

Where days numbers are from 0 to 6, and start by "Sunday", so the example above would only open Saturdays and Sundays.

On selection made

To trigger a function when a date selection has been made, you can use this:

data-on_date_selected=date_change

That code would call a JS function named "date_change" after the date selection has been made, you can use this to set the start date of another field.

Days

Note: in this and the following examples you must use double-quotes round the strings e.g. "Sun" (and not 'Sun')

to translate the days to a different language, you can use this:

data-shortdays=["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

And to change the days order you can change the short days indexes:

data-shortdays_indexes=[0, 1, 2, 3, 4, 5, 6]

For example, to have Monday as the first day use:

data-shortdays_indexes=[1, 2, 3, 4, 5, 6, 0]

Months

to translate the months:

data-shortmonths=["Jan", ...., "Dec"]

Start View

possible values are: y, m or d, e.g: change the start view of the picker to years:

data-start_view=y