Datepicker

Simple datepicker library for React.

Install

npm i @terrign/datepicker or yarn add @terrign/datepicker

Description

Library provides absolutely standalone component, which can be used without any configuration:

• <DatePicker />

And:

• <DatePickerFrom />
• <DatePickerTo />
• <Range /> - provider to bound together <DatePickerFrom /> and <DatePickerTo />

All three components can be used together to create a date range picker without losing the customization flexibility and styling of each component separately.

Example

Storybook

Basic Usage

import { DatePicker } from '@terrign/datepicker';
import { useState } from 'react';

export function App() {
  const [selectedDate, setSelectedDate] = useState<string | null>(null);

  const dateSelectHandler = (date: string | null) => {
    setSelectedDate(date);
  };

  return (
    <>
      <p>Selected date: {selectedDate}</p>
      <form onSubmit={(e) => e.preventDefault()}>
        <label htmlFor='Date'>Date</label>
        <DatePicker id='Date' defaultSelectedDate={selectedDate} onDateSelect={dateSelectHandler} />
      </form>
    </>
  );
}

Usage With Range

import { Range, DatePickerFrom, DatePickerTo, DatePickerProps } from '@terrign/datepicker';
import { useState } from 'react';

const commonProps: DatePickerProps = {
  theme: 'light',
  weekStart: 'Monday',
  minDate: '2022-01-01',
  maxDate: '2024-01-01',
  customStyles: {
    bgColor: '#f1f1f1',
    hoverBgColor: '#7de9e3',
  },
  calendarConfig: {
    disableWeekends: true,
    holidays: ['2024-01-01', '2023-12-05'],
  },
};

export function App() {
  const [startDate, setStartDate] = useState<string | null>(null);
  const [endDate, setEndDate] = useState<string | null>(null);

  const startDateHandler = (date: string | null) => {
    setStartDate(date);
  };
  const endDateHandler = (date: string | null) => {
    setEndDate(date);
  };

  return (
    <>
      <p>Start date: {startDate}</p>
      <p>End date: {endDate}</p>
      /* Do not provide defaultSelectedDate in Datepicker itself, instead use defaultSelectionStart and defaultSelectionEnd Range props */
      <Range defaultSelectionStart={startDate} defaultSelectionEnd={endDate}>
        <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex' }}>
          <label>
            Start Date
            <DatePickerFrom  onDateSelect={startDateHandler} {...commonProps} />
          </label>

          <label>
            End Date <DatePickerTo onDateSelect={endDateHandler} {...commonProps} />
          </label>
        </form>
      </Range>
    </>
  );
}

Props

• weekStart: 'Sunday' | 'Monday'

  First day of the week

• theme: 'light | 'dark'

  Predefined color set

• customStyles

  Object of custom styles. Overrides theme prop. Available options:

• onDateSelect: (date: string | null) => void

  Callback to run on date selection in calendar or manual date input

• defaultSelectedDate: string

  Default selected date in yyyy-mm-dd format

• maxDate?: string

  Maximum date available for selection in yyyy-mm-dd format

• minDate?: string

  Minimum date available for selection in yyyy-mm-dd format

• calendarConfig

  • holidays?: string[]

    An array of dates in yyyy-mm-dd format, which should be marked as holidays

  • disableWeekends?: boolean

    Whether to disable weekends

  • contextMenuOptions?: { label: string, onClick: (date: string) => void }[] =>

    Adds options to context menu, onClick callback will be fired on option click,

  • enableTodos?: boolean

    Adds option to right-click context menu to add, see and remove todos. Saves todos in localStorage