Skip to content

idesigncode/date-input

Repository files navigation

@idesigncode/date-input

An ESM date input component with a composable datepicker UI for React.

Features

  • Calendar datepicker UI for date selection.
  • Composable components for flexible customisation (optional).
  • Customisable display and value formats (as per date-fns format).
  • Maximum/minimum date range.
  • Uses the Constraint Validation API to setCustomValidity (with optional message customisation).
  • User typing support.
  • ARIA screen reader support.
  • Keyboard navigation support with Tab, Space/Enter & Esc/Escape keys.
  • Locale support for internationalisation.
  • Inherited text direction support for "RTL" (Right To Left) written languages.
  • Light & dark themes with prefers-color-scheme.
  • React controlled component.

Examples

Check out the Storybook docs for working examples.

Install

Update/install the peer dependencies as needed.

Install the package:

npm i @idesigncode/date-input

Basic usage

Here is a basic example of how to set up the component:

import React from 'react';
import DateInput from '@idesigncode/date-input/DateInput.mjs';
import '@idesigncode/date-input/theme.css';
import '@idesigncode/date-input/layout.css';

const BasicUsage = () => {
  const [value, setValue] = React.useState('');

  const handleOnChange = (event, formatValue) => {
    setValue(formatValue);
  };

  return (
    <DateInput name="field_name" onChange={handleOnChange} value={value} />
  );
};

export default BasicUsage;

For more information see the Required Props example.

Composable usage

If you want further customisation of the components you can compose them yourself:

import React from 'react';
import '@idesigncode/date-input/theme.css';
import Calendar from '@idesigncode/date-input/Calendar.mjs';
import '@idesigncode/date-input/Calendar.css';
import CalendarArrow from '@idesigncode/date-input/CalendarArrow.mjs';
import '@idesigncode/date-input/CalendarArrow.css';
import DateInput from '@idesigncode/date-input/DateInput.mjs';
import '@idesigncode/date-input/DateInput.css';
import CalendarTabs from '@idesigncode/date-input/CalendarTabs.mjs';
import '@idesigncode/date-input/CalendarTabs.css';
import Field from '@idesigncode/date-input/Field.mjs';
import '@idesigncode/date-input/Field.css';
import View from '@idesigncode/date-input/View.mjs';
import '@idesigncode/date-input/View.css';
import ViewBody from '@idesigncode/date-input/ViewBody.mjs';
import '@idesigncode/date-input/ViewBody.css';
import ViewHead from '@idesigncode/date-input/ViewHead.mjs';
import '@idesigncode/date-input/ViewHead.css';
import ViewWeekDays from '@idesigncode/date-input/ViewWeekDays.mjs';
import '@idesigncode/date-input/ViewWeekDays.css';

const ComposableUsage = () => {
  const [value, setValue] = React.useState('');

  const handleOnChange = (event, formatValue) => {
    setValue(formatValue);
  };

  return (
    <DateInput name="field_name" onChange={handleOnChange} value={value}>
      <Field />
      <Calendar>
        <CalendarArrow />
        <CalendarTabs />
        <View>
          <ViewHead />
          <ViewBody>
            <ViewWeekDays />
          </ViewBody>
        </View>
      </Calendar>
    </DateInput>
  );
};

export default ComposableUsage;

For more information about composable usage, please see the props/children example.

Styling

The CSS (themes) & CSS (layout) are exported for use via stylesheets. It is best to declare these default styles before your own styles.

You can also supply your own pre-styled component for the input field with the as prop (see the props/as documentation for more information).

Validation

Validation of the value is performed with the displayFormat, format, max, min and required props (if given).

This validation occurs during the input field's onInput event, and also on initial load (if there is a given value).

For more information about validation, please see the Validation example.

You can also set your own custom validity messages with the onValidationMessage prop (see the props/onValidationMessage example).

Accessibility

ARIA attributes are used to provide screen reader support.

All interactive elements are keyboard accessible by using the standard Tab & Space/Enter key navigation. The Esc/Escape key can also be used to close the <Calendar /> while open.

Upon the user opening the <Calendar />, either the selected date or first selectable date recieves :focus.

Required props

Prop Type Description
name string Standard HTML attribute for the field name.
onChange func A function for custom handling of onChange events. Receives the input field's onChange event and the formatValue (formatted as per format).
value string A date string formatted as per the format prop or an empty string.

Note: It is recommended to update your local state with the formatValue rather than the event.target.value.

Optional props

Prop Type Default Description
as elementType OR string Customise the input field with either a custom component or an HTML element.
className string Can be directly given to each component.
disabled bool Disable the input field and prevent calendar opening.
displayFormat string dd/MM/yyyy The date-fns format of the selected date when displayed to the user. This also becomes the placeholder text (lowercase).
format string yyyy-MM-dd The date-fns format of the max, min and value props. Also formats the formatValue returned from the onChange function.
initialView string Day The view to open the calendar to (either Day, Month or Year).
locale object en-AU The date-fns locale object used for formatting and text translation.
max string A date string formatted as per the format prop. This will prevent the user selecting a date after this date.
min string A date string formatted as per the format prop. This will prevent the user selecting a date before this date.
onValidationMessage function A function for custom handling of validation messages. Receives an error message string (due to an invalid value) or an empty string from the input field's onInput event.
open bool false Shows the <Calendar /> on initial load.
ref ref object A React ref for referencing the input field. This must only be applied to the <DateInput /> component.
required bool Standard HTML attribute for specifying a value is required.
...HTML attributes These will be passed to the input field unless they are reserved for use within the component.

Resources

License

MIT