Skip to main content

Date Format

Pattern
Live

The Date Format pattern automatically formats a users date input.

FigmaCode

Usage​

Date Format is an input field that offers automatic date formatting to improve the consistency and correctness of date entry.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { DateFormat } from "@iag/chroma-react-ui.components";

When to use​

Use Date Format when users need to input known dates (e.g. Date of Birth) or dates that are more than one year in the past/future.

When to avoid​

Avoid using Date Format for dates close to the present, or where a user needs to look up the date in relation the week or month for context. In this case consider the Datepicker component.

Do

  • Do use informative error messages for easier correction
  • Do provide help text for additional context or prompts
  • Do use placeholders to guide users on input format

Don't

  • Don't leave users puzzled; provide context or prompts if needed
  • Do use informative error messages for easier correction

Date Format vs. Datepicker​

Date Format has an advantage over the Datepicker component when the user knows the date they need to input, especially for dates more than a year in the past. It ensures correct formatting, saves time, and reduces cognitive load as users don't need to navigate through the calendar.