react-daterange-sk
v1.0.7
Published
A versatile React date range picker component
Downloads
3
Maintainers
Readme
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.
- Possible values:
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"
.