Skip to main content

📅 Datetime Picker

The Datetime Picker element in FormNX lets you collect date and time values from users in a simple, interactive way. Instead of asking users to type dates manually, they can pick a date (and optionally time) from a clean calendar interface — which prevents typos and ensures consistent formatting.

This element is ideal for booking forms, appointment scheduling, event registration, age verification, and any form that needs date or time input.

📌 How to Add the Datetime Picker to Your Form​

Follow these simple steps:

  1. Open the Form Builder.
  2. On the left hand side, you'll see the Elements section.
  3. Find the Datetime element.
  4. Drag and drop the element onto your form OR click on the element to add it automatically.

Once added, the Datetime Picker will appear in your form layout, ready to be customized.

How to add datetime field and setting configuration for the datetime field

⚙️ How to Configure the Datetime Picker​

To customize the field:

  1. Click on the Datetime Picker element in your form.
  2. The configuration panel will open on the right hand side.

You can configure the following options:

  1. Question Label ✏️
  • Add the question or label that users will see for this field.
  • Example:
    • "Select your appointment date"
    • "Choose your date of birth"
  1. Help Text 📝
  • Add a short instruction or hint below the field to guide users.
  • Example: "Please select a date within the next 30 days."
  1. Hide Question Label 🙈
  • Enable this option to hide the question label while keeping the date picker visible.
  1. Placeholder 💬
  • Add a placeholder value that appears inside the field before the user selects a date.
  • Example: "Select a date" or "DD/MM/YYYY".
  1. Is Required ✅
  • Enable the Is Required option to make the field mandatory.
  • Users won't be able to submit the form unless they select a date.
  1. Prefix & Suffix Icons 🎨
  • Add an icon at the beginning (prefix) or end (suffix) of the field.
  • Example: A 📅 prefix icon to clearly indicate it's a date field.
  1. Start Date 📆
  • Set the earliest date users can select from the calendar.
  • Useful for restricting selections to future dates only (e.g., for booking forms).
  1. End Date 📆
  • Set the latest date users can select from the calendar.
  • Useful for limiting selections to a specific time window (e.g., event dates).
  1. Date Format 🗓️
  • Choose how the date will be displayed in the field and stored in submissions.
  • Common formats include DD/MM/YYYY, MM/DD/YYYY, YYYY-MM-DD, and more.
  1. Default Value 🎯
  • Pre-fill the field with a default date.
  • Useful when most users would select the same date, or when suggesting a starting point.
  1. Disable Days 🚫
  • Block specific days of the week (or specific dates) from being selectable.
  • Example: Disable weekends for business-only appointments.
  1. Enable Time Picker ⏰
  • Turn on this option to allow users to select a time along with the date.
  • Useful for appointment booking, event scheduling, and any form that needs precise timing.
  1. Sensitive Data 🛡️
  • Mark the field as Sensitive Data to handle the response with extra care (such as masking it in submissions).
  • Useful when collecting dates like date of birth or other personal details.
  1. Age Verification 🔞
  • Use the Datetime Picker to verify that users meet a minimum age requirement before submitting the form.
  • Perfect for forms that should only accept submissions from users above a specific age (e.g., 18+).
  • For complete setup instructions, see the dedicated guide: Age Verification in Forms.

👤 How It Works for Users​

When users open the form:

  • They'll see the Datetime Picker with the label and any help text you've configured.
  • Clicking on the field opens a clean calendar interface.
  • They can:
    • Pick a date from the calendar (within the allowed start/end date range)
    • Pick a time (if Time Picker is enabled)
  • Disabled days will appear as non-selectable.
  • After selecting their date/time, they can continue filling and submitting the form.

💡 Common Use Cases​

  • Appointment booking — Let users choose a date and time for meetings or consultations.
  • Event registration — Collect attendance dates for events, workshops, or webinars.
  • Date of birth — Capture DOB for personalization or age verification.
  • Hotel & travel bookings — Pick check-in/check-out dates.
  • Deadline & due dates — Let users set deadlines for tasks, deliveries, or applications.
  • Age-restricted forms — Combine with Age Verification to prevent underage submissions.

The Datetime Picker makes it easy to collect accurate dates and times from your users — no manual typing, no formatting errors, and no extra coding needed.