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) |