# Date inputs

Use this page when the product stores dates, ranges, or timestamps and the main choice is between field-led entry and calendar-led picking.

## Quick Decision Rules

- Use [DateField](https://vega-ui.dev/components/date-field/) for one date in a form-like field.
- Use [DateRangeField](https://vega-ui.dev/components/date-range-field/) when one control owns start and end dates.
- Use [DateTimeField](https://vega-ui.dev/components/date-time-field/) when one stored value is a timestamp.
- Use [TimeField](https://vega-ui.dev/components/time-field/) for time-only values.
- Use [Calendar](https://vega-ui.dev/components/calendar/) when the experience should be visibly calendar-first.

## By Data Shape

- Single date: [DateField](https://vega-ui.dev/components/date-field/)
- Start and end date pair: [DateRangeField](https://vega-ui.dev/components/date-range-field/)
- Single timestamp: [DateTimeField](https://vega-ui.dev/components/date-time-field/)
- Time only: [TimeField](https://vega-ui.dev/components/time-field/)
- Visual date browsing and picking: [Calendar](https://vega-ui.dev/components/calendar/)

## Common Misclassifications

- Do not split one timestamp into separate date and time fields unless the workflow truly treats them independently.
- Do not use [Calendar](https://vega-ui.dev/components/calendar/) when the UI really needs a compact field in a form row.
- Do not use [DateField](https://vega-ui.dev/components/date-field/) for a connected range concept.
- Do not use [TimeField](https://vega-ui.dev/components/time-field/) when the stored value is actually date-time.

## Start Here

- Filters and settings forms: [DateField](https://vega-ui.dev/components/date-field/), [DateRangeField](https://vega-ui.dev/components/date-range-field/)
- Scheduling or booking flows: [DateTimeField](https://vega-ui.dev/components/date-time-field/), [DateRangeField](https://vega-ui.dev/components/date-range-field/)
- Always-visible visual picking: [Calendar](https://vega-ui.dev/components/calendar/)
- Non-Gregorian calendars, locale, and the ISO date value contract: [Dates and calendar systems](https://vega-ui.dev/docs/i18n/)