1.0.1 • Published 1 year ago

mui-daterange-picker-orient v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

MUI DateRange Picker

A React date range picker implementation using @mui (v5).

Preview

Screenshot

Usage

npm install mui-daterange-picker-orient --save

# or with yarn
yarn add mui-daterange-picker-orient

Basic example

import React from "react";
import { DateRangePicker, DateRange } from "mui-daterange-picker-orient";

type Props = {}

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

  const toggle = () => setOpen(!open);

  return (
    <DateRangePicker
      open={open}
      toggle={toggle}
      onChange={(range) => setDateRange(range)}
    />
  );
}

export default App;

Types

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

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

Props

NameTypeRequiredDefault valueDescription
onChange(DateRange) => voidrequired-handler function for providing selected date range
toggle() => voidrequired-function to show / hide the DateRangePicker
initialDateRangeDateRangeoptional{}initially selected date range
minDateDate or stringoptional10 years agomin date allowed in range
maxDateDate or stringoptional10 years from nowmax date allowed in range
definedRangesDefinedRange[]optional-custom defined ranges to show in the list
closeOnClickOutsidebooleanoptionaltruedefines if DateRangePicker will be closed when clicking outside of it
wrapperClassNameobjectoptionalundefineddefines additional wrapper style classes
localeLocale (from date-dns)optionalundefineddefines locale to use (from date-fns package)
verticalOrientationbooleanoptionalfalsedefines if DateRangePicker will orient itself vertically (caller can set it for for potrait screens)

Made possible by