DateTime Field

Overview

The DateTime component allows the user to to input date and time together which outputs a standard ISO 8601 datetime.

If you do not need to use ISCO 8601 and are just looking for a simpler component that either returns just the time or the date then visit the Time Field and Date Field components.

When to use

• Use a Date Time Field if the entry requires its value formatted as a ISO_8601 datetime.
• If you require either a date and time or just a date value in the above format.

When not to use

• Do not use Date Time Field if you only need to return a plain date or time value.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Date Time Field

Label (optional)

Label Date (optional)

Label Time (optional)

Invalid time

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Date Format

DateFormat

type DateFormat = typeof dateFormats[number];

The format for the date input.

 

dd/mm/yyyymm/dd/yyyyyyyy/mm/dddd.mm.yyyymm.dd.yyyyyyyy.mm.dddd-mm-yyyymm-dd-yyyyyyyy-mm-dd

Date Input Only

boolean

false

Hides the time input field and always sets the time to 00:00:00.

Toggle Prop

Error

string

Array<string>

Errors to display for the input.

Value 

Error Hidden

boolean

false

Only display the red border but not the error text.

Toggle Prop

Help Text

string

Array<string>

The help text to display for the input.

Value 

Label

string

Required

The label to be shown above the input.

 

Label Hidden

boolean

false

Only display the label for screen readers.

Toggle Prop

Required

boolean

false

If the field is required.

Toggle Prop

Time Format

TimeFormat

type TimeFormat = typeof timeFormats[number];

24

The format for the time input.

 

1224

12 Hour Time

I am DateTime (optional)

I am DateTime Date (optional)

I am DateTime Time (optional)

AMPM

I am DateTime (optional)

I am DateTime Date (optional)

I am DateTime Time (optional)

AMPM

I am DateTime (optional)

I am DateTime Date (optional)

I am DateTime Time (optional)

AMPM

Date Only

If only a full date is required and time is not the focus but it still needs to be stored as and ISO8601 date then it's possible to use the dateInputOnly prop to hide the time value and only display the date. In this case the time will automatically always return the time for the date at midnight 00:00:00

Default

I am DateTime (optional)

I am DateTime Date (optional)

With an error

I am DateTime (optional)

I am DateTime Date (optional)

This is an example error

With help text

I am DateTime (optional)

I am DateTime Date (optional)

This is a helpful hint for a user

Figma Library

You can find the component in our MedKit Figma library.