React Date Range Picker by Sk

A flexible and customizable React date range picker component that allows users to select a date range. This package is designed to be easy to use and highly customizable, providing various options to meet different use cases.

Installation To install the package, use the following npm command:

npm i react-daterange-sk 

Usage

DateRangePicker Component (With Range feature)

import { useState } from "react";
import DateRangePickerAtom from "react-daterange-sk";

interface DateRangePickerValueInterface {
  startDate?: string;
  endDate?: string;
}

const DateRange: React.FC = () => {
  const [DateRangePicker, setDateRangePicker] =
    useState<DateRangePickerValueInterface>({
      startDate: undefined,
      endDate: undefined,
    });

  return (
    <DateRangePickerAtom
      inputViewType="single"
      label="Select Date Range"
      placeholder="Date Select"
      dropdownAlignment="left"
      value={DateRangePicker}
      onChange={(value?: any) => {
        value && setDateRangePicker(value);
      }}
    />
  );
};

export default DateRange;

DateRangePicker Component (Without Range feature)

import { useState } from "react";
import DateRangePickerAtom from "react-daterange-sk";

interface DateRangePickerValueInterface {
  startDate?: string;
  endDate?: string;
}

const DateRange: React.FC = () => {
  const [DateRangePicker, setDateRangePicker] =
    useState<DateRangePickerValueInterface>({
      startDate: undefined,
      endDate: undefined,
    });

  return (
    <DateRangePickerAtom
      hideRangeFeatures
      inputViewType="single"
      label="Select Date Range"
      placeholder="Date Select"
      dropdownAlignment="left"
      value={DateRangePicker}
      onChange={(value?: any) => {
        value && setDateRangePicker(value);
      }}
    />
  );
};

export default DateRange;

Props

width (optional): To set the date input width. (New)

• inputViewType (optional): Specifies whether to display a single input or a range with two inputs. Default is "range".

  • Possible values:
    • "single": Display a single input field.
    • "range": Display a range with two inputs.

• value (optional): The selected date or date range. Should be of type DateRangePickerValue.

• onChange (optional): A callback function triggered when the date or date range changes. Receives the selected dates as an argument.

• placeholder (optional): Placeholder text displayed in the input field.

• label (optional): Label for the date picker.

• hideRangeFeatures (optional): Hides range-related features when set to true.

• dropdownAlignment (optional): Alignment of the dropdown menu.

  • Possible values:
    • "center"
    • "left"
    • "right"
  • Default is "left".