![Demis [Fox-Labs]'s Avatar](https://secure.gravatar.com/avatar/30cdb3d88f2b8f0d7fdea0316b70342b?s=144&r=g&d=https%3A%2F%2Fwww.fox.ra.it%2Fimages%2Favatar-fox.png)
- Posts: 3856
- Thank you received: 515
Date, Time, Calendar Picker
24 Jun 2014 23:38 - 16 Jan 2017 12:15 #1
by Demis [Fox-Labs]
Date, Time, Calendar Picker was created by Demis [Fox-Labs]
Time interval
By default Time picker has an interval of 1 hour between values.
If you need different values, for example half an hour, you have to edit the configuration file: components/com_foxcontact/js/foxtext.js
On Fox Contact 3.x, search for the valueand replace it withOn Fox Contact 2.x, search for the valueand replace it withDo not delete the comma at the end of the line.
Time range
To restrict the selectable times to a custom range such as your business opening hours, edit the configuration file: components/com_foxcontact/js/foxtext.js
On Fox Contact 3.x, search for the calendar optionsthen add your range using minTime and maxTime properties expressed in 24 hours format.
The following example restricts the selectable times between 08:00 AM and 06:00 PM.Do not forget the comma at the end of each line.
Note that times outside this range will be still visible but disabled.
If you restrict the time selection this way, you would certainly find useful to set the option 'defaultTime' to the same value as your opening time. This causes the default preselected time to be your opening time, in place of the current time which could be outside your time defined range.
On Fox Contact 2.x the time range can not be restricted.
Date range
To restrict the selectable dates to a custom range, edit the configuration file: components/com_foxcontact/js/foxtext.js
On both Fox Contact 2.x and 3.x, search for the calendar options as for 'Time range' above - then add your range using minDate and maxDate as wanted. This can be a specific date or an expression for a date relative to today.
The following example restricts dates to not before January 1st, 2016
This restricts the earliest date to today
or to tomorrow (now + 1 day)
And this sets the last date possible to 1 month after today
By setting a date range you probably want to set the default selection within that range, rather than use the current day.
To do so, add the property defaultDate as follows:
Even with a defined time range, you may want to prevent the selection of dates in the past. For example, if your form accepts reservation for the summer period, from 1st June to 30th September, when August comes, it doesn't make sense to continue accepting reservation for July, which is still within the given time range, but at the time of the booking it is already past.
In that case, you have to use the max() function to automatically select between a fixed date and the current one:
Do not forget the comma at the end of each line.
Disable a certain day of the week
This only applies to Fox Contact 3.x
Perhaps you don't want any Sundays to be selected (Sunday = 0, ... Saturday = 6).Or certain days of the year
Fast year selector
This is only available in Fox Contact 3.x
When the mouse hovers over the year in the date picker, it underlines. Clicking on it produces a dropdown list of years which allows a quick selection of a particular year instead of having to step backwards or forwards one month at a time.
The default range is 1950 to 2050. If you want to change this, use the yearStart & yearEnd optionsOr, from this year to 10 years in the future,Quotes are not needed for numeric values.
Default value
To auto fill the calendar with a default value, you need to edit the configuration file: components/com_foxcontact/js/foxtext.js
Search for the calendar optionsthen add your default date using 'value' property as follows:Do not forget the comma at the end of each line.
By default Time picker has an interval of 1 hour between values.
If you need different values, for example half an hour, you have to edit the configuration file: components/com_foxcontact/js/foxtext.js
On Fox Contact 3.x, search for the value
step: 60,step: 30,timeWheelStep: 60,timeWheelStep: 30,Time range
To restrict the selectable times to a custom range such as your business opening hours, edit the configuration file: components/com_foxcontact/js/foxtext.js
On Fox Contact 3.x, search for the calendar options
Fox.Options.add('calendar', {The following example restricts the selectable times between 08:00 AM and 06:00 PM.
Fox.Options.add('calendar', {
minTime: '08:00',
maxTime: '18:00',Note that times outside this range will be still visible but disabled.
If you restrict the time selection this way, you would certainly find useful to set the option 'defaultTime' to the same value as your opening time. This causes the default preselected time to be your opening time, in place of the current time which could be outside your time defined range.
defaultTime:'08:00',
On Fox Contact 2.x the time range can not be restricted.
Date range
To restrict the selectable dates to a custom range, edit the configuration file: components/com_foxcontact/js/foxtext.js
On both Fox Contact 2.x and 3.x, search for the calendar options as for 'Time range' above - then add your range using minDate and maxDate as wanted. This can be a specific date or an expression for a date relative to today.
The following example restricts dates to not before January 1st, 2016
minDate: '2016/01/01',This restricts the earliest date to today
minDate: new Date(),or to tomorrow (now + 1 day)
minDate: new Date((new Date).getFullYear(), (new Date).getMonth(), (new Date).getDate() + 1),And this sets the last date possible to 1 month after today
maxDate: new Date((new Date).getFullYear(), (new Date).getMonth() + 1, (new Date).getDate()),By setting a date range you probably want to set the default selection within that range, rather than use the current day.
To do so, add the property defaultDate as follows:
defaultDate: '2016/01/01',Even with a defined time range, you may want to prevent the selection of dates in the past. For example, if your form accepts reservation for the summer period, from 1st June to 30th September, when August comes, it doesn't make sense to continue accepting reservation for July, which is still within the given time range, but at the time of the booking it is already past.
In that case, you have to use the max() function to automatically select between a fixed date and the current one:
minDate: new Date(Math.max.apply(null, [new Date(), new Date(2017, 0, 15)])),Do not forget the comma at the end of each line.
Disable a certain day of the week
This only applies to Fox Contact 3.x
Perhaps you don't want any Sundays to be selected (Sunday = 0, ... Saturday = 6).
onGenerate: function(cdt) {
jQuery('.xdsoft_day_of_week0').addClass('xdsoft_disabled');
},disabledDates: ['2015/12/25', '2015/12/26', '2016/01/01', '2016/01/02'],Fast year selector
This is only available in Fox Contact 3.x
When the mouse hovers over the year in the date picker, it underlines. Clicking on it produces a dropdown list of years which allows a quick selection of a particular year instead of having to step backwards or forwards one month at a time.
The default range is 1950 to 2050. If you want to change this, use the yearStart & yearEnd options
yearStart: 1949,
yearEnd: 2034,yearStart: (new Date).getFullYear(),
yearEnd: (new Date).getFullYear() + 10,Default value
To auto fill the calendar with a default value, you need to edit the configuration file: components/com_foxcontact/js/foxtext.js
Search for the calendar options
Fox.Options.add('calendar', {Fox.Options.add('calendar', {
value: Date.dayNames[(new Date).getDay()] + ', ' + (new Date).getDate() + ' ' + Date.monthNames[(new Date).getMonth()] + ' ' + (new Date).getFullYear(),Please Log in or Create an account to join the conversation.
