@zngly/daterange-picker NPM

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(close)}</DateRangePicker>} 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)