How do I configure the date field

The Date field is used to collect calendar dates, such as birth dates, booking dates, or deadlines. It supports different input styles, multiple display formats, and rules that control which dates users can pick. This article explains how the Date field works and how you can customize it in the IvyForms builder.

You can add the Date field from the Advanced section in the left panel of the IvyForms builder. When you expand this section, the Date field appears together with other advanced inputs like Time, Password, and Signature. Click the Date option to insert it into your form, then select the field in the preview to open its settings.

After you select the Date field in the preview, the sidebar switches to the Options view. The settings are divided into three parts: General, Advanced, and Smart logic. These control how the field looks, which dates are allowed, and when the field is shown to users.

How do general settings work for the date field?

The General tab contains the main configuration options for the Date field. Here you can define the label, helper text, input style, and the format in which dates are shown and stored.

• Label – sets the text shown above or next to the date input, for example “Booking date” or “Date of birth”.
• Hide label – removes the visible label on the front-end while keeping the field itself active.
• Description – adds a short explanation under the field, such as “Select your preferred date”.
• Required – makes the Date field mandatory so users must choose a valid date before submitting the form.
• Read-only – shows a fixed date that users can see but cannot change.
• Placeholder – displays example text inside the input before a date is selected.
• Date field type – decides how the date input is presented:
  • Date picker – shows a calendar pop-up where users can click to select a date.
  • Date input – uses a standard date input field where users can type or select a date, depending on the browser.
  • Date dropdown – splits the date into separate dropdowns (for day, month, and year) so users choose each part individually.
• Date format – defines how dates appear to users and how they are formatted in the field. You can choose between options like MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD, or DD.MM.YYYY, depending on your region and preference.
• CSS classes – allows you to add custom class names for styling the Date field through your own CSS.

How do advanced settings work for the date field?

The Advanced tab gives you more control over which dates can be selected and what value appears by default. These options work together with the chosen Date field type, so the input style stays consistent across all date-related settings.

• Default value – sets an initial date that appears when the form loads. The way you choose this value matches the selected Date field type: for a date picker you choose from a calendar, for a date input you type or select a date in the input, and for a date dropdown you choose day, month, and year from dropdowns.
• Minimum date – defines the earliest date a user is allowed to select. Any date before this point will be disabled or treated as invalid. The selection interface follows the active Date field type (picker, input, or dropdown).

• Maximum date – sets the latest date that can be chosen. Dates after this limit are not allowed, again using the same interface style as the field type selected in General.
• Label position – controls where the label appears in relation to the Date field. You can keep the Default placement or move the label to the Top, Left, or Right to better match your form layout.

How can I use smart logic with the date field?

The Smart logic settings let you control when the Date field appears on the form. By default, the field is always visible. When you enable smart logic, you can define conditions based on other answers that determine whether the Date field should be shown.

Once smart logic is activated, the Conditional match setting becomes available and offers two ways to evaluate your rules:

• Any – the Date field is displayed if at least one of the defined conditions is true.
• All – the Date field is displayed only when every condition you have configured is met at the same time.

These conditions use values from other fields in the same form. For example, you can show the Date field only after a user selects a specific service type, chooses an event option from a dropdown, or indicates that they want to schedule something in the future. This helps you display date selection only when it is relevant, keeping your forms clear and focused.