All CategoriesForm ElementsDate Question

Date Question

Create a field to allow users to pick a date from a calendar.

Abdul Samad

Written by Abdul Samad

The Date Question element allows you to collect date information from your users with an intuitive calendar picker. This versatile element can be used for scheduling, collecting birth dates, setting deadlines, or any other date-related information you need.

What is the Date Question Element?

The Date Question element provides users with a calendar interface to select a date. Users can either type a date directly or click on the calendar icon to open a visual date picker. The element is highly customizable, allowing you to control the date format, include time selection, and set default values.

Date Question Element
Date Question Element

Adding a Date Question to Your Calculator

  1. In the editor panel, click the Add element plus icon button.
  2. Select Date from the list of available elements.
  3. The Date element will be added to your calculator with default settings.

Configuring Your Date Question

Date Question Settings
Date Question Settings

Basic Settings

  • Title: Enter the question text that will appear above the date field.
  • Description: Add optional explanatory text that appears below the field.
  • Hint: Add a tooltip hint that users can view by hovering over the information icon.
  • Required: Toggle whether users must complete this field before submitting.

Date Format Options

  • Date Format: Choose how the date is displayed:

    • DMY: Day/Month/Year (e.g., 31/12/2023)
    • MDY: Month/Day/Year (e.g., 12/31/2023)
    • YMD: Year/Month/Day (e.g., 2023/12/31)
Date Format Options
Date Format Options
  • Date Separator: Select the character used to separate date components:
    • Dash (-): 31-12-2023
    • Slash (/): 31/12/2023
    • Dot (.): 31.12.2023
Date Separator Options
Date Separator Options

Default Date Settings

  • Default Date: Set what date (if any) should be pre-selected:
    • None: No default date is selected
    • Current: Today's date is pre-selected
    • Custom: Specify a particular date to pre-select

Time Settings

  • Include Time: Toggle whether users can also specify a time with their date selection.
  • Time Format: Choose between:
    • 24h: 24-hour format (e.g., 14:30)
    • 12h: 12-hour format with AM/PM (e.g., 2:30 PM)
  • Default Time: Set a default time value to pre-select when including time.
Time Settings
Time Settings

Display Settings

  • Placeholder: Enter text that appears when no date is selected.

Logic Settings - Show/Hide Logic

Toggle this option if you want to control whether the Date question is shown or hidden under certain circumstances. If the result of the visibility formula is TRUE or a number above 0, the question is visible. If the result is FALSE or 0, it's hidden.

For more information on logic settings and show/hide logic, refer to our help article on conditional visibility of calculator input fields.

How Users Interact with the Date Element

  1. Users can click directly in the field to enter a date manually in the specified format.
  2. Users can click the calendar icon to open a visual date picker.
  3. If time is enabled, users can also select hours and minutes using the time selector.
  4. Users can clear their selection by clicking the "X" that appears inside the field after a date is selected.
Date Question Interaction
Date Question Interaction

Advanced Date Calculations

Using JavaScript Formulas with Dates

When you enable JavaScript formulas in your calculator settings, you can perform powerful date calculations. For example, you can calculate future dates by adding days:

const currentDate = new Date();
 
const futureDate = new Date(currentDate);
 
futureDate.setDate(currentDate.getDate() + 54);
 
const options = { year: "numeric", month: "long", day: "numeric" };
 
futureDate.toLocaleDateString(undefined, options);

You can see this in action in our Day Calculator Example, which adds 54 days to the selected date.

Date Values in Form Submissions and Integrations

When you add a submission button to your calculator, all date values are automatically included in:

  • Submission Results: The date appears in your results dashboard in the format you specified
  • Email Notifications: Date values are included in email notifications to you or your users
  • Google Sheets Integration: Dates are properly formatted and sent to your connected Google Sheet
  • Webhook Integrations: Date values are included in the JSON payload sent to webhook endpoints

This makes the Date element ideal for applications like appointment scheduling, project timelines, or any form that requires date information to be stored or processed.

Tips for Using Date Questions

  • Use clear instruction: Make it obvious what date format you're expecting with clear labels and descriptions.
  • Consider default values: If you're asking for a date that's likely to be today or within a specific timeframe, setting a default can save users time.
  • Time inclusion: Only enable time selection when the specific time is necessary for your calculator's function.
  • Validation: The "Required" toggle ensures users can't skip this question if the date is essential for your calculations.
  • Date calculations: Use JavaScript formulas for complex date calculations like business days or custom date ranges.

Styling Your Date Question

Style your Date element to match your calculator's design using the theme options. You can customize:

  • Field background color
  • Text color
  • Font size
  • Border radius
  • Padding and margins

By choosing the right settings for your Date Question element, you can make date input intuitive and seamless for your users while collecting the exact date information your calculator needs.

Did this answer your question?