Simplify your stack and build anything. Or everything.
Schedule a Demo
USE CASES
Headless CMSEnterprise App BuilderHeadless E-CommerceDigital Asset Management
FEATURES
Multi-TenancyWhite LabelLocalizationAccess ControlAuth
CASE STUDIES

See what others are building with Payload.

Browse Case Studies
Build tomorrow’s web with a modern solution you truly own.
PAYLOAD IS FOR
DevelopersMarketing teamsEnterprise companiesAgencies & Consultancies
COMPARE PAYLOAD
Payload vs WordPressPayload vs ContentfulPayload vs SanityPayload vs StrapiPayload vs Directus
AGENCY TESTIMONIAL

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Become a PartnerFind a Partner
Code-based nature means you can build on top of it to power anything.
Resources
DocumentationExamplesTemplatesGitHubReleasesBlogGuides & Tutorials
Community
RoadmapDiscordCommunity Help
Resources for Developers

Get the resources you need to start building today

Guides & TutorialsExplore Docs
It’s time to take back your content infrastructure.
Schedule a Demo
Enterprise Features
SSOAI Auto-EmbeddingPublishing WorkflowsVisual EditorStatic A/B testingAI features
Customer Stories
MicrosoftASICSBlue OriginHello BelloTekton
Featured Customer Story

Microsoft chose Payload to tell the world about AI.

Read the case studyBrowse all
LoginGet Started

DatePicker

The DatePicker component wraps react-datepicker with Payload's styles, localization, and date and time display options.

Import

Inside a Payload Admin Panel Custom Component:

1
import { DatePicker } from '@payloadcms/ui'

Basic usage

Loading component example…

Pair the picker with a visible label. id is applied to the picker's wrapper element, not to the underlying input, so pass the input ID through overrides and point the label's htmlFor at that value:

1
<label htmlFor="publish-date-input">Publish date</label>
2
<DatePicker
3
onChange={setValue}
4
overrides={{ id: 'publish-date-input' }}
5
value={value}
6
/>

The Admin Panel supplies the translation context that DatePicker uses for its calendar labels.

Picker appearances

Use pickerAppearance to choose between a date, date and time, day, month, or time input. Payload selects a matching display format when displayFormat is not provided.

Appearance

Input

default

Calendar date

dayAndTime

Calendar date and time

dayOnly

Day and month

monthOnly

Month

timeOnly

Time

Common props

These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.

Prop

Type

Default

Description

id

string

—

Sets the ID of the picker's wrapper element.

value

Date | string

—

Selected date or date string.

onChange

(value: Date) => void

—

Runs when the selected value changes.

placeholder

string

—

Displays text when no value is selected.

pickerAppearance

'default' | 'dayAndTime' | 'dayOnly' | 'monthOnly' | 'timeOnly'

'default'

Selects the date and time controls shown.

displayFormat

string

Automatic

Overrides the date-fns display format.

minDate

Date

—

Sets the earliest selectable date.

maxDate

Date

—

Sets the latest selectable date.

monthsToShow

1 | 2

1

Sets the number of visible calendar months.

timeIntervals

number

30

Sets the number of minutes between time options.

readOnly

boolean

false

Prevents the value from being changed.

overrides

ReactDatePickerProps

—

Passes supported options to react-datepicker.

Was this page helpful?

Next

ErrorPill