Date picker

The RhDatePicker is a component that has been designed to allow users to select dates and times.

Usage

Once installed, you can import the RhDatePicker component into your React application:

import {RhDatePicker} from "@rhythm-ui/react"

Then, you can use the RhDatePicker component in your JSX code:

<RhDatePicker value="2022-07-14" />

DatePicker Props

Enable Time

The enableTime option enables the RhDatePicker component to display additional fields or controls for selecting time in addition to the date. When set to true, the user can select both the date and time simultaneously.

<RhDatePicker value="2022-07-14" options={{ enableTime: true }} />

Multiple Dates

The multiple dates option adds additional fields or controls to the date picker, allowing the user to select multiple dates.

<RhDatePicker value="2022-07-14" options={{ mode: "multiple" }} />

Range

The range option adds additional fields or controls to the date picker, allowing the user to select both a start date and an end date, such as separate fields for each date or a range selector tool.

<RhDatePicker
  value={["2022-07-14", "2022-07-30"]}
  options={{ mode: "range" }}
/>

Minimum and maximum dates

Enabling this option would allow the developer to set a minimum and maximum date that a user can select, either to prevent the selection of dates that are too far in the future or past or to limit the selection to a specific range of dates.

<RhDatePicker
  value="2022-07-14"
  options={{
    minDate: "2022-07-09",
    maxDate: "2022-07-19",
  }}
/>

Disable Specific dates

To specify the dates that should be disabled for the disable dates option, additional props may need to be passed to the component, such as an array of dates or a function that returns a Boolean value indicating whether a given date should be disabled.

<RhDatePicker
  value="2022-07-12"
  options={{
    disable: ["2022-07-09", "2022-07-18", "2022-07-22", "2022-07-14"],
  }}
/>

Format Date

The component can be set up to format the selected date or dates in a specific way. Enabling this option would allow the developer to specify the format of the date string that is displayed in the input field or elsewhere in the UI, such as using a specific date format or including additional information like the day of the week or the time.

<RhDatePicker
  value="2022-07-14"
  options={{ dateFormat: "d M Y" }}
  onChange={() => null}
/>

Month Picker

MonthSelectPlugin is an optional plugin for the flatpickr library that provides a dropdown for selecting a month, which can be useful for selecting dates in a particular month.

function MonthPicke() {
  const date = new Date()
  return (
    <RhDatePicker
      value={date}
      options={{
        plugins: [
          new monthSelectPlugin({
            dateFormat: "M Y", //defaults to "F Y"
            theme: "flatpickr-monthSelect-months",
          }),
        ],
      }}
      onChange={() => null}
    />
  );
}