Date Field

This is a Pro feature. Upgrade to Pro to use date pickers.

The date field provides a calendar picker for selecting dates. Ideal for appointments, events, deadlines, and birthdates.

When to use

Appointment scheduling
Event registration
Birthdate collection
Project deadlines
Date-based filtering

For times, use the Time field. For both, add both fields or consider a booking plugin.

Settings

Label

Example: "Preferred Date", "Date of Birth", "Event Date"

Placeholder

Example: "Select a date", "MM/DD/YYYY"

Description

Help text or date format guidance.

Required

Make date selection mandatory.

Default value

Pre-selected date:

Default Value: today

Or a specific date:

Default Value: 2024-12-25

Date restrictions

Minimum date

Earliest selectable date:

Setting	Description
`today`	Today and future only
`tomorrow`	Tomorrow onwards
`+7 days`	One week from now
`2024-01-01`	Specific date

Maximum date

Latest selectable date:

Setting	Description
`today`	Today and past only
`+30 days`	Within next 30 days
`+1 year`	Within next year
`2024-12-31`	Specific date

Disabled days

Days that cannot be selected:

Setting	Effect
Weekends	Saturdays and Sundays disabled
Specific dates	Holiday list
Past dates	Historical dates disabled

Disable weekends:

Disabled: Saturday, Sunday

Disable specific dates:

Disabled Dates: 2024-12-25, 2024-12-26, 2024-01-01

Display options

Date format

How the date appears after selection:

Format	Example
`MM/DD/YYYY`	12/25/2024
`DD/MM/YYYY`	25/12/2024
`YYYY-MM-DD`	2024-12-25 (ISO)
`Month D, YYYY`	December 25, 2024

First day of week

Start calendar on:

Sunday (US default)
Monday (EU default)

Show week numbers

Display week numbers in the calendar picker.

Examples

Appointment booking

Label: Preferred Appointment Date
Required: Yes
Min Date: tomorrow
Max Date: +60 days
Disabled: Saturday, Sunday
Description: We're available Monday-Friday

Date of birth

Label: Date of Birth
Required: Yes
Max Date: today
Min Date: 1900-01-01
Format: MM/DD/YYYY

Event registration

Label: Which date works best?
Required: Yes
Min Date: 2024-06-01
Max Date: 2024-06-30
Disabled Dates: 2024-06-15, 2024-06-22
Description: Select from available dates in June

Project deadline

Label: Deadline
Required: No
Min Date: +7 days
Default Value: +30 days
Description: When do you need this completed?

Conditional logic

Show fields based on date selection:

Example: Show rush fee notice for dates within 7 days:

Condition: deadline < +7 days
Action: Show rush_fee_notice HTML field

Styling

<div class="fodo-field fodo-field-date">
  <label class="fodo-label" for="field_abc123">
    Preferred Date
    <span class="fodo-required">*</span>
  </label>
  <input
    type="date"
    id="field_abc123"
    name="fields[abc123]"
    class="fodo-input fodo-input-date"
    min="2024-01-15"
    max="2024-03-15"
    required
  >
</div>

Custom calendar styling

The date picker uses the native browser date picker for best mobile experience. For custom styling, CSS options are limited but you can style the input:

.fodo-input-date {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.fodo-input-date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

.fodo-input-date::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

Data format

Dates are stored and transmitted in ISO format: YYYY-MM-DD

This ensures consistency across:

Database storage
Webhook payloads
CSV exports
Integrations

Display formatting is applied in the admin and frontend based on your settings.

Date Field

On this page