> ## Documentation Index
> Fetch the complete documentation index at: https://fillout-005a867b-dependabot-npm-and-yarn-form-data-4-0-6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Date

> Collect a single date, data and time, or date range from your respondents. This is useful for bookings, events, and availability tracking. 

## Date fields vs Scheduling page

**Date fields** (Date picker, Date time picker, and Date range) collect a date input. Common use cases include:

* Asking a repondent's date of birth
* Collecting project deadlines
* Gathering travel or vacation dates
* Tracking project start and end dates
* [Collecting multiple availabilities](https://www.fillout.com/help/date-range#collect-multiple-availabilities)

On the other hand, **Scheduling pages** reserve available time slots on an individual's calendar (Google or Outlook calendar).

| Date Fields                   | Scheduling Page                        |
| ----------------------------- | -------------------------------------- |
| Collects a date or time input | Books a real calendar slot             |
| No calendar integration       | Connects to Google or Outlook Calendar |
| No availability checking      | Shows live availability                |
| No automatic booking          | Automatically creates calendar event   |
| Best for general forms        | Best for appointments & meetings       |

This article is about date fields. To know more about scheduling pages, check out [this guide](https://www.fillout.com/help/scheduling-page).

## How to add a date fields

In the left-hand panel of your form, drag and drop your chosen **date field**. You can pick between:

* **Date picker** - collects a single date
* **Date time picker** - collects a date and time
* **Date range** - lets respondents select start and end dates in your forms

In our example, we'll select `Date range`.

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-form-data-4-0-6/60XYaN8M6v6eMBSZ/images/Screenshot2025-10-02at6.31.40PM.png?fit=max&auto=format&n=60XYaN8M6v6eMBSZ&q=85&s=b071b5419212fd5f9a11f205bd25fa3b" alt="Screenshot 2025-10-02 at 6.31.40 PM.png" width="2624" height="1438" data-path="images/Screenshot2025-10-02at6.31.40PM.png" />

## Change date format and settings

To configure your field settings, click <Icon icon="gear-complex" iconType="solid" />. In the right-hand panel, you can:

* Set a default start and end date
* Change the date format and first day of the week
* Add a minimum and maximum range respondents can choose from

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-form-data-4-0-6/60XYaN8M6v6eMBSZ/images/Screenshot2025-10-02at7.34.14PM.png?fit=max&auto=format&n=60XYaN8M6v6eMBSZ&q=85&s=194959d776021fe783e7c5903cf0b2bb" alt="Screenshot 2025-10-02 at 7.34.14 PM.png" title="Screenshot 2025-10-02 at 7.34.14 PM.png" style={{ width:"35%" }} width="474" height="1112" data-path="images/Screenshot2025-10-02at7.34.14PM.png" />

## Collect multiple availabilities

To gather several preferred dates and times from respondents, add multiple `date fields` to your form.

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-form-data-4-0-6/oJ7LY4haRzATxb7E/images/Screenshot2026-03-02at4.07.29PM.png?fit=max&auto=format&n=oJ7LY4haRzATxb7E&q=85&s=d2c322e52dfbfa74ebb801f9f6176401" alt="Screenshot 2026 03 02 At 4 07 29 PM" title="Screenshot 2026 03 02 At 4 07 29 PM" style={{ width:"63%" }} width="1206" height="958" data-path="images/Screenshot2026-03-02at4.07.29PM.png" />

## Mapping to Airtable, Notion and other databases

<Steps>
  <Step title="Select an integration">
    Click `Integrate` in top menu and choose Airtable, Notion or another [database](/integrations).
  </Step>

  <Step title="Add a Date range field">
    Click `Edit` in the top menu. In the left-hand panel under **Other**, click your `Date field`.
  </Step>

  <Step title="Map fields">
    Go back to the `Integrate` page. Under **Mappings**, choose the fields you want to save the start and end dates to. Reference your integration fields from the left to Fillout form fields in the right.

    <img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-form-data-4-0-6/oO5k5FPOY4bT5lbU/images/images/image-18.png?fit=max&auto=format&n=oO5k5FPOY4bT5lbU&q=85&s=24ccd3e60c7c262ba65b0ab6fbd12568" alt="Screenshot of the Form designer tab of a form" width="2059" height="647" data-path="images/images/image-18.png" />
  </Step>
</Steps>

## Related article

<CardGroup cols={3}>
  <Card color="#FFC738" icon="calendar-days" iconType="regular" href="pre-fill-dates" title="Pre-fill dates">
    Set the default value to today, tomorrow, or another date.
  </Card>

  <Card color="#FFC738" icon="calendar-day" iconType="regular" title="Scheduling page">
    Let respondents book a time slot on your calendar.
  </Card>
</CardGroup>
