DateRange

Due to issues with dependencies, this component has been temporarily excluded from the library.

The DateRange component is a date picker for selecting a range of dates. It allows users to select a start and end date from a calendar. It provides custom labels, and date normalization to UTC.

Installation

bash
npm i @gbit-lib/daterange

Usage

JSX
<DateRange
  label="Select a date range"
  firstDate={new Date('2023-01-01')}
  lastDate={new Date('2023-12-31')}
  handleChange={(start, end) => {
    console.log('Selected range:', start, end)
  }}
/>

Example

Props

  • label (optional): The label text for the date range input.
  • firstDate: The initial start date.
  • lastDate: The initial end date.
  • handleChange: A callback function that receives the selected start and end dates.
  • disabled (optional): If true, the date range picker is disabled.
  • labelColor (optional): Custom color for the label text (default is `#333`).
  • labelBackground (optional): Custom background color for the label (default is `white`).