Date Field

Overview

Date allows the user to to input date in a format which can be stored accurately. Use the date component to help users enter a memorable date or one they can easily look up.

The date component supports a number of common date formats, which can be seen below. Unlike our Date Time field component Date only returns a consistently formatted date string. If you need to return an ISO 8601 datetime then make use of the Date Time field component instead.

When to use

• Use Date if the entry requires an entry in day, month, year, day and month, month and year.

When not to use

• Do not use Date if it is purely a number value which needs to be entered, e.g. ‘11’.

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 Field

Label (optional)

Props Help

For each property in a component you can see:

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

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

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

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

Default

Label (optional)

Supported date formats

Day-Month-Year (optional)

Month-Day-Year (optional)

Year-Month-Day (optional)

Day-Month-Year with full stop delimeter (optional)

Month-Day-Year with full stop delimeter (optional)

Year-Month-Day with full stop delimeter (optional)

Day-Month-Year with hyphen delimeter (optional)

Month-Day-Year with hyphen delimeter (optional)

Year-Month-Day with hyphen delimeter (optional)

With Help Text

Label (optional)

A useful hint for the user

Figma Library

You can find the component in our MedKit Figma library.