DateRange Picker

A react date range picker implementation

npm

https://www.npmjs.com/package/@zngly/daterange-picker

Usage

npm install @zngly/daterange-picker --save

# or with yarn
yarn add @zngly/daterange-picker

Basic example

import React from 'react';
import { DateRangePicker, DateRange } from '@zngly/daterange-picker';

type Props = {};

const App: React.FunctionComponent<Props> = (props) => {
    const [open, setOpen] = React.useState(false);
    const [dateRange, setDateRange] = React.useState<DateRange>({});

    return <DateRangePicker open={open} onClose={() => setOpen(false)} onChange={(range) => setDateRange(range)} />;
};

export default App;

Types

interface DateRange {
    startDate?: Date;
    endDate?: Date;
}

interface DefinedRange {
    label: string;
    startDate: Date;
    endDate: Date;
}

Props

Name	Type	Required	Default value	Description
open	boolean	required	-	If the datepicker is open or not
onChange	(DateRange) => void	optional	-	handler function for providing selected date range
onClose	() => void	optional	-	function to hide the DateRangePicker
initialDateRange	DateRange	optional	{}	initially selected date range
minDate	Date or string	optional	10 years ago	min date allowed in range
maxDate	Date or string	optional	10 years from now	max date allowed in range
definedRanges	DefinedRange[]	optional	-	custom defined ranges to show in the list
closeOnClickOutside	boolean	optional	true	defines if DateRangePicker will be closed when clicking outside of it
className	object	optional	undefined	defines additional wrapper style classes
locale	Locale (from date-dns)	optional	undefined	defines locale to use (from date-fns package)