DateTimeInput

A combined date and time input with calendar popover and time fields.

Examples

Default

Meeting

Meeting date

Choose Meeting date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Meeting time

<DateTimeInput
  label="Meeting"
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Empty

Meeting

Meeting date

Choose Meeting date

Previous month

July 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

Close popover

Meeting time

<DateTimeInput label="Meeting" />

With Seconds

Meeting

Meeting date

Choose Meeting date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Meeting time

<DateTimeInput
  label="Meeting"
  hasSeconds
  value={Temporal.PlainDateTime.from('2026-05-21T09:30:45')}
/>

With Constraints

Meeting

Meeting date

Choose Meeting date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Meeting time

<DateTimeInput
  label="Meeting"
  min={Temporal.PlainDateTime.from('2026-05-01T08:00')}
  max={Temporal.PlainDateTime.from('2026-05-31T18:00')}
  value={Temporal.PlainDateTime.from('2026-05-15T12:00')}
/>

Disabled

Meeting

Meeting date

Choose Meeting date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Meeting time

<DateTimeInput
  label="Meeting"
  isDisabled
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Loading

Meeting

Meeting date

Choose Meeting date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Meeting time

<DateTimeInput
  label="Meeting"
  isLoading
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Error

Meeting

Meeting date

Choose Meeting date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Meeting time

Please select a valid date and time.

<DateTimeInput
  label="Meeting"
  status={{message: 'Please select a valid date and time.', type: 'error'}}
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Small

Meeting

Meeting date

Choose Meeting date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Meeting time

<DateTimeInput
  label="Meeting"
  size="sm"
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Sizes

Small

Small date

Choose Small date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Small time

Medium

Medium date

Choose Medium date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Medium time

Large

Large date

Choose Large date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Large time

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  <DateTimeStory
    label="Small"
    onChange={() => {}}
    size="sm"
    value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
  />
  <DateTimeStory
    label="Medium"
    onChange={() => {}}
    size="md"
    value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
  />
  <DateTimeStory
    label="Large"
    onChange={() => {}}
    size="lg"
    value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
  />
</div>

Required

Meeting · Required

Meeting date

Choose Meeting date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Meeting time

<DateTimeInput
  label="Meeting"
  isRequired
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Optional

Meeting · Optional

Meeting date

Choose Meeting date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Meeting time

<DateTimeInput
  label="Meeting"
  isOptional
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Hidden Label

Meeting

Meeting date

Choose Meeting date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Meeting time

<DateTimeInput
  label="Meeting"
  isLabelHidden
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

With Label Tooltip

Meeting

Select the date and time for the meeting.

Meeting date

Choose Meeting date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Meeting time

<DateTimeInput
  label="Meeting"
  labelTooltip="Select the date and time for the meeting."
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

With Description

MeetingChoose a date and time during business hours.

Meeting date

Choose Meeting date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Meeting time

<DateTimeInput
  label="Meeting"
  description="Choose a date and time during business hours."
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

API

DateTimeInput

A combined date and time input with calendar popover and time fields.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
getIsDateDisabled	(date: PlainDate) => boolean	—	Returns true for dates that should be disabled.
description	ReactNode	—	Supporting text rendered below the label.
hasSeconds	boolean	false	Whether to show the seconds field in the time input.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
label*	string	—	Field label text.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainDateTime	—	Maximum selectable date-time.
min	PlainDateTime	—	Minimum selectable date-time.
onChange*	(value: PlainDateTime | null) => void	—	Called when the selected date-time changes.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the date input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the inputs.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the root element.
value*	PlainDateTime | null	—	Currently selected date-time. Pass null for an empty input.
isOptional	false	—
isRequired	false	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
getIsDateDisabled	(date: PlainDate) => boolean	—	Returns true for dates that should be disabled.
description	ReactNode	—	Supporting text rendered below the label.
hasSeconds	boolean	false	Whether to show the seconds field in the time input.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
label*	string	—	Field label text.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainDateTime	—	Maximum selectable date-time.
min	PlainDateTime	—	Minimum selectable date-time.
onChange*	(value: PlainDateTime | null) => void	—	Called when the selected date-time changes.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the date input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the inputs.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the root element.
value*	PlainDateTime | null	—	Currently selected date-time. Pass null for an empty input.
isOptional*	true	—
isRequired	false	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
getIsDateDisabled	(date: PlainDate) => boolean	—	Returns true for dates that should be disabled.
description	ReactNode	—	Supporting text rendered below the label.
hasSeconds	boolean	false	Whether to show the seconds field in the time input.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
label*	string	—	Field label text.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainDateTime	—	Maximum selectable date-time.
min	PlainDateTime	—	Minimum selectable date-time.
onChange*	(value: PlainDateTime | null) => void	—	Called when the selected date-time changes.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the date input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the inputs.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the root element.
value*	PlainDateTime | null	—	Currently selected date-time. Pass null for an empty input.
isOptional	false	—
isRequired*	true	—