Using the Date Time Field

Published in Convert Forms
Updated 06 Dec, 2021

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.

Date Time field preview

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.

View all available Convert Forms Fields

Step 2: Add the Date/Time field

Click on the "Date / Time" button to add the field in your form.

Select the Date/Time field to add it to 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.

Configure the Date/Time field

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 = [
		'2021-10-20',
		'2021-10-21',
		'2021-10-22'
	];
	
	document.querySelector('.' + input_css_class)._flatpickr.set('disable', [function(date) {
		let formatted = date.toISOString().slice(0, 10);
        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.querySelector('.' + input_css_class)._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.querySelector('.' + input_css_class)._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.querySelector('.' + input_css_class)._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.

Disable past dates

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.

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.