Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Input Date

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Field that help users navigate dates, selecting specific date.

import { InputDate } from '@kubit-ui-web/react-components'
12345678910
<InputDate
  variant="DEFAULT"
  rightIcon={{ icon: 'ICON_PLACEHOLDER' }}
  label={{ content: 'Label' }}
  placeholder="Placeholder"
  format="DD-MM-YYYY"
  locale="en-EN"
  maxDate={getCurrentDate()}
  minDate={getCurrentDate('01-01-2000')}
  today="Today, "

The inputDate component inherits its properties of the input component. For more information visit the Input documentation.

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

12345678910
<InputDate
  variant="DEFAULT"
  rightIcon={{ icon: 'ICON_PLACEHOLDER' }}
  label={{ content: 'Label' }}
  placeholder="Placeholder"
  format="DD-MM-YYYY"
  locale="en-EN"
  maxDate={getCurrentDate()}
  minDate={getCurrentDate('01-01-2000')}
  defaultDate={getCurrentDate()}

Range

When a date range is needed the hasRange prop must be set to TRUE . The default dateSeparator between initialDate and initialSecondDate is to.

12345678910
<InputDate
  variant="DEFAULT"
  rightIcon={{ icon: 'ICON_PLACEHOLDER' }}
  label={{ content: 'Label' }}
  placeholder="Placeholder"
  format="DD-MM-YYYY"
  locale="en-EN"
  maxDate={getCurrentDate()}
  minDate={getCurrentDate('01-01-2000')}
  today="Today, "

Weekdays Format

Inside calendar prop, you can add formatWeekDayOption key to set the format of the weekdays. The default value is narrow.

12345678910
<InputDate
  variant="DEFAULT"
  rightIcon={{ icon: 'ICON_PLACEHOLDER' }}
  label={{ content: 'Label' }}
  placeholder="Placeholder"
  format="DD-MM-YYYY"
  locale="en-EN"
  maxDate={getCurrentDate()}
  minDate={getCurrentDate('01-01-2000')}
  today="Today, "

Sunday First Day

Inside calendar prop, you can add sundayFirst key to set Sunday as the first day of the week. The default value is false.

12345678910
<InputDate
  variant="DEFAULT"
  rightIcon={{ icon: 'ICON_PLACEHOLDER' }}
  label={{ content: 'Label' }}
  placeholder="Placeholder"
  format="DD-MM-YYYY"
  locale="en-EN"
  maxDate={getCurrentDate()}
  minDate={getCurrentDate('01-01-2000')}
  today="Today, "
Input CurrencyAccessibility
Input DateDesign Specs