material-ui-i18n-daterange-picker v1.2.2

Material UI DateRange Picker

A react date range picker implementation using @material-ui.

Preview

Live Demo

Check out the project running here!

Usage

npm install materialui-daterange-picker --save

# or with yarn
yarn add materialui-daterange-picker

Basic example

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

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

Made possible by

Changelog

###v1.2.2 Fixing date parsing issues caused by the upgrade of date-fns

###v1.2.1 The concept (and prop!) of locale was introduced. See https://date-fns.org/v2.16.1/docs/Locale

###v1.2.0 Dependencies upgraded