Date Input

Documentation of the <DateInput /> component. Learn how to use it and its available props.

Installation#

To get started, install @exponentialeducation/datetime via yarn:

# Yarn
yarn add @exponentialeducation/datetime

Basic example#

The DateInput allows users to enter a date either through an input field, or by choosing a single date from a monthly calendar overlay. DateInput is built on top of the react-day-picker library.

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput />

      {/* ... */}
    </main>
  )
}

The previous example describes the simplest way of using the DateInput component, it uses default props and renders a component like the following:

As already mentioned, the DateInput component allows entering a date through an input field, this can be done using the DD / MM / YYYY format. Where DD represents the day, MM represents the month and YYYY represents the year. By doing this, the calendar will automatically set the specified date, otherwise if the entered format or date is invalid.

DateInput with FormGroup#

<FormGroup /> can also be added by wrapping <DateInput /> component; including labels, helpers and status like required or disabled.

Adding label#

In order to attach a label to a <DateInput />, it is necessary to define a labelFor prop in the wrapping component along with prop id on it to match them.

import { DateInput } from "@exponentialeducation/datetime";
import { FormGroup } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <FormGroup
        label="Label"
        labelFor="label-date-input-example"
      >
        <DateInput id="label-date-input-example" />
      </FormGroup>

      {/* ... */}
    </main>
  )
}

Required#

Sometimes, some fields may be required, a decorator indicator can be added with the prop required in order to indicate that the field cannot be empty.

import { DateInput } from "@exponentialeducation/datetime";
import { FormGroup } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <FormGroup
        label="Label"
        labelFor="label-required-example"
        required
      >
        <DateInput id="label-required-example" />
      </FormGroup>

      {/* ... */}
    </main>
  )
}

Right element#

Sometimes, the purpose of the <DateInput /> field may be confusing. In this cases, an icon helper can be added to describe what this input is intended for. This can be done through the prop rightElement. The value of rightElement can consist of an icon, for example, or another JSX element.

import { DateInput } from "@exponentialeducation/datetime";
import { FormGroup } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <FormGroup
        label="Label"
        labelFor="label-right-element-example"
        rightElement={
          <HelperIcon className="w-4" />
        }
        required
      >
        <DateInput id="label-right-element-example" />
      </FormGroup>

      {/* ... */}
    </main>
  )
}

Right element with helper#

With the previous example, there could also be necessary to provide a helper text or sentence to clarify the intention, use, or purpose of the <DateInput /> field.

import { DateInput } from "@exponentialeducation/datetime";
import { FormGroup } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <FormGroup
        label="Label"
        labelFor="label-helper-text-example"
        helperText="This is a helper text example"
        rightElement={
          <HelperIcon className="w-4" />
        }
        required
      >
        <DateInput id="label-helper-text-example" />
      </FormGroup>

      {/* ... */}
    </main>
  )
}

Disabling styles#

There are two ways of preventing the interaction with the DateInput component through the prop disabled.

When using <DateInput /> component without any wrapper such as the <FormGroup /> component, the prop disabled displays disabled styles and makes the input non-interactive.

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput disabled />

      {/* ... */}
    </main>
  )
}

When using <FormGroup /> component the prop disabled must be define at the wrapper component level, meaning the <FormGroup /> component, as follows:

import { DateInput } from "@exponentialeducation/datetime";
import { FormGroup } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <FormGroup
        disabled
        label="Label"
        labelFor="label-disabled-example"
        helperText="This is a helper text example"
        rightElement={
          <HelperIcon className="w-4" />
        }
        required
      >
        <DateInput id="label-disabled-example" />
      </FormGroup>

      {/* ... */}
    </main>
  )
}

NOTE: If the prop disabled is provided to the <DateInput /> component when using the wrapper <FormGroup />, the disabled styles and non-interaction won't work. This is because in this case the wrapper or parent level component leads the disabled state.

import { DateInput } from "@exponentialeducation/datetime";
import { FormGroup } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <FormGroup>  {/* disabled prop should live at this level */}
        <DateInput disabled />
        {/* disabled prop here won't apply corresponding styles */}
      </FormGroup>

      {/* ... */}
    </main>
  )
}

Selected date value#

DateInput allows the user to provide or not a date through the defaultValue prop, which will be selected in the DateInput's calendar overlay.

Default value#

By default DateInput has no default value, in addition, a defaultValue is optional. However, when no value is provided the placeholder displays the "DD/MM/YYYY" date format suggestion.

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput />

      {/* ... */}
    </main>
  )
}

Placeholder#

The placeholder prop, allows the user to display a custom message inside the DateInput container to give a hint to the user about the purpose of the DateInput.

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput placeholder="Start date" />

      {/* ... */}
    </main>
  )
}

Provided value#

In the following example the defaultValue prop is set to October 24th, 2021.

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput
        defaultValue={new Date(2021, 9, 24)}
      />

      {/* ... */}
    </main>
  )
}

Changing selected date#

When changing the selected day by either entering the date in the input field or selecting in in the calendar overlay, the onChange prop can be used to listen for changes to the selected day.

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  const myMethod = (selectedDate: Date) => {
    alert(selectedDate);
  }

  return (
    <main>
      {/* ... */}

      <DateInput
        onChange={myMethod}
      />

      {/* ... */}
    </main>
  )
}

Calendar navigation#

Sometimes, it could be necessary to customize, prevent or restrict the calendar overlay navigation. DateInput comes with the necessary props to do so.

Hide outside days#

The prop showOutsideDays hides the days that don't belong to the current month and disables them for selection.

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput
        showOutsideDays={false}
      />

      {/* ... */}
    </main>
  )
}

Prevent month navigation#

In some cases, it is necessary to allow the user to select a date only from the current month. This can be achieved through the prop canChangeMonth.

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput
        canChangeMonth={false}
      />

      {/* ... */}
    </main>
  )
}

Set the initial month#

In other cases, due to different reasons such as a starting date of an event, for example, the user should select a date from an initial month. The following example describes the use of initialMonth which displays the calendar overlay starting from that month. In this case, starting at January 2022:

Notice how the DateInput placeholder also displays a date according to the initialMonth prop.

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput
        initialMonth={new Date(2022, 0)}
      />

      {/* ... */}
    </main>
  )
}

Set the starting point#

There is also a scenario where the user must choose a date starting from a specific point and not before. For example, select a day from the current day (today). The prop minDate defines the initial date in which a user can choose. If the user selects a date before the minDate, the DateInput would be considered as invalid.

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput
        minDate={new Date()}
      />

      {/* ... */}
    </main>
  )
}

Set the latest point#

The prop maxDate does something similar to the minDate but the other way around. With this prop, the user can choose until a certain date. If the user selects a date after the maxDate, the DateInput would be considered as invalid.

The props minDate and maxDate can be used together to specify a limited and controlled range in which a user can select a date.

The following example describes a selection range starting from today until March 2022:

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput
        minDate={new Date()}
        maxDate={new Date(2022, 2, 31)}
      />

      {/* ... */}
    </main>
  )
}

Disabling dates#

Disable before minDate & after maxDate#

Taking the previous example, the DateInput component allows the user to prevent dates selection. For instance, with the prop disabledDates, the modifiers before and after can be used to disable the selection of all the dates before minDate and after maxDate respectivelly. This gives the user more control and makes the date selection less prone to error or invalid dates.

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput
        minDate={new Date()}
        maxDate={new Date(2022, 2, 15)}
        disabledDates={{
          before: new Date(),
          after: new Date(2022, 2, 15)
        }}
      />

      {/* ... */}
    </main>
  )
}

Display days as disabled#

The disabledDates prop can also be used to display specific days as disabled.
The following example disables the following dates:

• October 12th 2021.
• Novembre 2nd 2021.
• The range between December 20th 2021 and January 1st 2021 using the { from, to } modifiers.

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput
        disabledDates={[
          new Date(2021, 9, 12),
          new Date(2021, 10, 2),
          {
            from: new Date(2021, 11, 20),
            to: new Date(2022, 0, 1)
          }
        ]}
      />

      {/* ... */}
    </main>
  )
}

Disable weekends & more#

The prop disabledDates can also disable specific days of the week, for example, the first and last one, meaning Sundays and Saturdays. To achieve this the modifier { daysOfWeek } must be attached to the disabledDates prop.
The following example disables weekends:

import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <DateInput
        disabledDates={[
          { daysOfWeek: [0, 6] }
        ]}
      />

      {/* ... */}
    </main>
  )
}

Customize validation#

Through the valid prop, users can define logic and conditions according to the selected date to decide whether it is valid or not according to specific use cases.

In the following example, there's a logic that validates that the selected date is between the range from a minimum and maximum date.

import { useEffect, useState } from "react";
import { DateInput } from "@exponentialeducation/datetime";

function IndexPage() {

  const minDate = new Date();
  const maxDate = new Date(2022, 2, 15);

  const [date, setDate] = useState(new Date());
  const [isValid, setIsValid] = useState<boolean>();

  useEffect(() => {
    const example = validateDay(date);
    setIsValid(example);
  }, [date]);

  function validateDay(selectedDate?: Date) {
    {/* ... */}
    if(
      !selectedDate ||
      selectedDate.getTime() > maxDate.getTime() ||
      selectedDate.getTime() < minDate.getTime()
    ) 
    {/* ... */}
  }

  function myMethod(selectedDate?: Date) {
    setDate(selectedDate);
  }

  return (
    <main>
      {/* ... */}

      <DateInput
        defaultValue={date}
        minDate={minDate}
        maxDate={maxDate}
        onChange={myMethod}
        valid={isValid}
      />

      {/* ... */}
    </main>
  )
}

Modifiers#

Modifiers apply styles to days in the DateInput calendary overlay. Modifiers are a react-day-picker concept and are documented in full in the react-day-picker documentation.

Props#