Convert Forms Date Time field provides you with a popup date picker for your forms. This field type is useful for event registration forms, booking forms, and other types of Joomla contact forms where you need to ensure you receive a properly formatted date.
- How to add a Date Time field to your Joomla Forms
- Field Settings
- Advanced Customizations
- Frequently Asked Questions
How to add a Date Time field to your Joomla Forms
You can easily add a Date/Time field in your form by following the steps listed below:
Step 1: Click on "Add Field"
To view all the available fields, click on the "Add Field" button.
Step 2: Add the Date/Time field
Click on the "Date / Time" button to add the field in your form.
Step 3: Customize the Date/Time field
Once the field has been added to your form, you can customize it via the plethora of settings provided to fit your needs.
Below you can find all the available field settings.
Field Settings
The settings available for the Date/Time field can be seen below:
- Date selection mode: Enable user to select a single date, mulitple dates or a date range.
- Date Format: The format of the outputted date. Example: d/m/Y H:i, Y-m-d or m/d/YYY.
- First Day of the Week: Change the first day of the week presented in the date picker calendar.
- Min Date: The minimum/earliest date allowed for selection. Supports relative date formats such as: today, tomorrow, +5 day, +2 week.
- Max Date: The maximum/latest date allowed for selection. Supports relative date formats such as: today, tomorrow, +5 day, +2 week.
- Time 24Hour: Displays time picker in 24 hour mode without AM/PM selection.
- Minute Step: Adjusts the step for the minute input in the Time Picker.
- Display Inline: Displays the calendar inline instead of as a popup.
- Theme: Select a calendar theme from a pre-made list of themes.
- Disable Mobile Native Date Picker: If enabled, mobile users will see the Convert Forms Date Picker instead of the device native date picker.
Advanced Customizations
Allow users to select multiple dates
To allow your users to select multiple dates, you will need to select Multiple under the setting Date selection mode.
Allow users to select a date range
To allow your users to select a date range, you will need to select Range under the setting Date selection mode.
Prefill field with the current date
To prefill the field with the current date, you will need to enter today in the Default Value setting.
Disable specific dates
To disable specific dates you will need to set a unique CSS class to the setting Input CSS Class. For this example, we will set it to cf-disable-dates.
Then go to Design > Advanced > Custom Code and enter the following Javascript snippet:
<script>
ConvertForms.Helper.onReady(function() {
// Set the Input CSS Class of the Date/Time field
let input_css_class = 'cf-disable-dates';
// Set the dates that will be disabled
let disable_dates = [
'2022-09-20',
'2022-09-22',
'2022-09-28'
];
document.querySelectorAll('.' + input_css_class).forEach(element => {
element._flatpickr.set('disable', [function(date) {
let formatted = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2);
return disable_dates.includes(formatted);
}]);
});
});
</script>- Set input_css_class variable to the Input CSS Class set in your Date/Time field.
- Set the dates you want to disable in YYYY-MM-DD format in the variable disable_dates
Disable specific weekdays
To disable specific weekdays you will need to set a unique CSS class to the setting Input CSS Class. For this example, we will set it to cf-disable-weekdays.
Then go to Design > Advanced > Custom Code and enter the following Javascript snippet:
<script>
ConvertForms.Helper.onReady(function() {
// Set the Input CSS Class of the Date/Time field
let input_css_class = 'cf-disable-weekdays';
/**
* Set the days that will be disabled.
*
* 1: Monday
* 2: Tuesday
* 3: Wednesday
* 4: Thursday
* 5: Friday
* 6: Saturday
* 0: Sunday
*
* The example below disables Monday, Wednesday,
* Friday, Saturday and Sunday
*/
let disable_days = [
1,
3,
5,
6,
0
];
// Do not edit below
document.querySelectorAll('.' + input_css_class).forEach(element => {
element._flatpickr.set('disable', [function(date) {
return disable_days.includes(date.getDay());
}]);
});
});
</script>- Set input_css_class variable to the Input CSS Class set in your Date/Time field.
- Set disable_days to disable the specific days you desire.
Disable Saturday and Sunday
To disable Saturday and Sunday you will need to set a unique CSS class to the setting Input CSS Class. For this example, we will set it to cf-disable-weekend.
Go to Design > Advanced > Custom Code and enter the following Javascript snippet:
<script>
ConvertForms.Helper.onReady(function() {
// Set the Input CSS Class of the Date/Time field
let input_css_class = 'cf-disable-weekend';
// Do not edit below
document.querySelectorAll('.' + input_css_class).forEach(element => {
element._flatpickr.set('disable', [function(date) {
return date.getDay() == 6 || date.getDay() == 0;
}]);
});
});
</script>- Set input_css_class variable to the Input CSS Class set in your Date/Time field.
Disable a date range
To disable a date range you will need to set a unique CSS class to the setting Input CSS Class. For this example, we will set it to cf-disable-range-dates.
Then go to Design > Advanced > Custom Code and enter the following Javascript snippet:
<script>
ConvertForms.Helper.onReady(function() {
// Set the Input CSS Class of the Date/Time field
let input_css_class = 'cf-disable-range-dates';
// Set the date ranges that will be disabled
let disable_dates = [
{
from: '2021-10-15',
to: '2021-10-30'
},
{
from: '2021-11-10',
to: '2021-11-15'
}
];
// Do not edit below
document.querySelectorAll('.' + input_css_class).forEach(element => {
element._flatpickr.set('disable', [function(date) {
let flag = false;
disable_dates.forEach(dates => {
let from = new Date(dates.from);
from.setHours(0,0,0,0);
let to = new Date(dates.to);
to.setHours(0,0,0,0);
if (date >= from && date <= to) {
flag = true;
return;
}
});
return flag;
}]);
});
});
</script>- Set input_css_class variable to the Input CSS Class set in your Date/Time field.
- Set disable_dates to disable the date ranges you desire. The dates in from and to must be in YYYY-MM-DD date format.
Disable past dates
To disable past dates and allow only dates from today and onwards to be selected, you will need to enter today in the setting Min Date.
Make a Date field minimum date depend on another Date field
This is quite useful when you want to create a booking system with Arrival/Departure dates and dont want your users to enter same dates or a departure date prior to the arrival date. This ensures dates entered are in consecutive order.
To create such a system, you will need to set a unique CSS class to the setting Input CSS Class for both Date/Time fields. For this example, we will set it to cf-date-1 as well as cf-date-2 for fields Date/Time #1 and Date/Time #2 respectively.
The second Date/Time field will start 1 day after the selected date in the first Date/Time field. However, this can be customized below.
Then go to Design > Advanced > Custom Code and enter the following Javascript snippet:
<script>
ConvertForms.Helper.onReady(function(){
// Set the Input CSS Class of the Date/Time field #1
let input_css_class_date1 = 'cf-date-1';
// Set the Input CSS Class of the Date/Time field #2
let input_css_class_date2 = 'cf-date-2';
// Set how many days to add to the second Date/Time picker
let days_to_add_to_date_2 = 1;
// Do not edit below
let date1 = document.querySelector('.' + input_css_class_date1)._flatpickr;
let date2 = document.querySelector('.' + input_css_class_date2)._flatpickr;
date2.set('onOpen', [function(selectedDates, dateStr, instance) {
let date = new Date(date1.selectedDates[0]);
date2.set('minDate', date.setDate(date.getDate() + days_to_add_to_date_2))
}]);
});
</script>- Set input_css_class_date1 variable to the Input CSS Class set in your first Date/Time field in.
- Set input_css_class_date2 variable to the Input CSS Class set in your second Date/Time field in.
- Set days_to_add_to_date_2 variable to how many days after the first Date/Time field will the second Date/Time field start.
Disable weekdays and a date range
You can also combine any of the above code to further narrow down your available dates. In this scenario, we want to disable a few week days as well as a specific date range.
First of all, go into your Date/Time field and set CSS Class to cf-exclude-dates.
Then go into your Form > Design > Advanced > Custom Code and add the following Javascript snippet:
<script>
ConvertForms.Helper.onReady(function() {
let datepicker = document.querySelector('.cf-exclude-dates');
/**
* Set the days that will be disabled.
*
* 1: Monday
* 2: Tuesday
* 3: Wednesday
* 4: Thursday
* 5: Friday
* 6: Saturday
* 0: Sunday
*
* The example below disables Monday, Wednesday,
* Friday, Saturday and Sunday
*/
let disable_days = [
1,
0
];
// Set starting date for date range to disable
let disable_range_dates_start = '2022-07-25';
// Set ending date for date range to disable
let disable_range_dates_end = '2022-09-22';
// Do not edit below
datepicker._flatpickr.set('disable', [function(date) {
let currentDate = date.getFullYear() + '-' + ("0" + (date.getMonth() + 1)).slice(-2) + '-' + ("0" + date.getDate()).slice(-2);
return disable_days.includes(date.getDay()) || (currentDate >= disable_range_dates_start && currentDate <= disable_range_dates_end);
}]);
});
</script>- Set the weekdays to disable in disable_days variable
- Set the start date of the date range to disable in disable_range_dates_start variable
- Set the end date of the date range to disable in disable_range_dates_end variable
How to calculate the age from a Date/Time field
There are times where you need to calculate the visitor's age based on the selected date from a Date/Time field and even use it to display fields conditionally.
To calculate the age, create a Date/Time field where the user selects a Date of Birth and add in Input CSS Class: cf-dob
Then, create a hidden field with Field Name set to cf-dob-hidden, this will be used to store the age of the visitor.
In your Form > Design > Advanced > Custom Code add the following:
<script>
ConvertForms.Helper.onReady(function() {
const dateOfBirthDateCSSClass = "cf-dob";
const dateOfBirthHiddenCSSClass = "cf-dob-hidden";
// DO NOT EDIT BELOW
const cfDobDateField = document.querySelector('.flatpickr-input.' + dateOfBirthDateCSSClass)._flatpickr;
const cfDobDateHiddenField = document.querySelector('input[type="hidden"][name="cf[' + dateOfBirthHiddenCSSClass + ']"]');
cfDobDateField.set("onChange", function(selectedDate) {
let tempDate = new Date(selectedDate);
let diff = Date.now() - tempDate.getTime();
let age = new Date(diff);
let ageFinal = Math.abs(age.getUTCFullYear() - 1970);
cfDobDateHiddenField.value = ageFinal;
cfDobDateHiddenField.dispatchEvent(new Event('change', { 'bubbles': true }));
});
});
</script>
You can use it for the hidden field (visitor's age) in your calculations/conditional logic.
Frequently Asked Questions
What are the requirements to use the Date Time field?
In order for the Date/Time field to work, your browser needs to have Javascript enabled, otherwise, you won't be able to select a date from the field.
Does the Date Time field load any 3rd-party libraries?
The Date/Time field needs to load a library called flatpickr. As Convert Forms is built with performance in mind, this library only loads when the Date/Time field is used in a form.
How can I translate the Date Time picker?
Convert Forms automatically localizes the Date/Time picker by using the currently active language on the site. So depending on the language you are browsing the site from, the Date/Time picker will also appear in that particular language.
How can I format the date?
To format the date you will need to use some special formatting tokens in the setting Date Format.
You can find all available formatting tokens, here.
