The “Restrict Dates” feature allows you to set limitations on date fields within your form. This feature is useful when you want to restrict users from selecting certain dates, such as past dates or specific ranges.
With this you can improve the user experience and ensure that users select valid dates within your specified criteria. Whether it’s preventing users from selecting past dates, limiting future date selections, or defining a specific date range, this feature adds flexibility and control to your form design.
Table of contents:
Getting started
Step 1: Install the Plugin
Once you’ve chosen a plugin, you’ll need to install it on your website. Log into your WordPress admin dashboard. Navigate to the “Plugins” section and click on “Add New.” Search for the plugin by name and click “Install Now” once you find it.
Step 2: After installation, click on “Activate” to activate the plugin.
How to add restricted date fields?
- Step 1: Edit Your Form: Begin by creating a new form or opening the page or post where you want to add the form in Elementor. Edit the page using Elementor’s visual editor.
- Step 2: Add a Date Field: Drag and drop the Form widget onto the desired section of your page.
- Step 3: Select Restrict Date Type: In the form field selection window, use the search bar to find the “Restrict Date” type. Click on it to add them to your form.
- Step 4: Set Minimum and Maximum Dates: Look for the “Min Date” and “Max Date” options within the Field Options. These settings allow you to define the minimum and maximum allowable dates for user selection.
There are 3 types:
+ None: There will be no date limit for selection. Users can select past, present, and future dates
+ Current date: it means that you want to restrict users from selecting a date before the current date.
+ Set date: you can choose any dates as minimum and maximum date
Restrict dates settings
How to set specified range days?
This allows users to select a start date and an end date within a specified range.
Step 1: Find Min/Max options to configure the minimum and maximum number of days for the range.
- Specify the minimum number of days that a user can select as the start date.
- Specify the maximum number of days that a user can select as the end date.
If you choose Set date, click on Min/Max date pick to show the date table for settings.
Step 2: For example, at the Schedule field, we set min date is 2023 Oct 5th and max date is 2023 Oct 29th.
Step 3: See a preview: Any date between the ranges can be chosen.
How to link two date pickers?
To link two date pickers, where the selection in one date picker affects the available options in the other, you can follow these steps:
Let’s say you have two date pickers:“Check-in Date” and “Check-out Date”. The goal is to restrict the available options in the “Check-out Date” picker based on the selected “Check-in Date”.
- When a user selects a “Check-in Date”, the “Check-out Date” picker should only allow dates on or after the selected “Check-in Date”.
- If the user changes the “Check-in Date”, the options in the “Check-out Date” picker should update accordingly.
Step 1: Add two Date fields for the “Check-in Date” and “Check-out Date”. Set Min and Max date sequentially.
Step 2:
Locate Check-in – Advanced
Copy the ID and paste it to Link Min Field of Check-out.
Locate Check-out – Advanced
Copy ID and paste to Link Max Field of Check-in.
Step 3: Save and have a look.
How to add an exception?
Exceptions allow you to negate the date limitations established in the other settings. An exception works with both selectable dates and unselectable dates. If the excepted date is selectable, it will now be unselectable. If the excepted date is unselectable, it will now be selectable.
E.g:
If Oct 6th through Oct 16th are selected for the next appointment. But you would like to make allow a specific Oct 13th to be unselectable, you can add an “exception” for that 13th. Click the Add Exception button and select the desired date from the date picker.
Days of week
This setting allows you to restrict which dates are selectable based on the days of the week (e.g. Monday – Sunday).
By default, all days are allowed. Uncheck all days option to select specific days.
Video Demo
That’s it! We hope this article helped you find out how to use Restrict dates with your Elementor forms.