CODEWITHSUNDEEP
reactjsmaterial-ui
user3377364
user3377364

Reputation: 181

Material UI Date Range Picker

I'm trying to set up a material ui date range picker example following the code on the docs but it's giving me an error, TypeError: undefined is not a function.

I've never seen useState followed by a component before and it's what's throwing the error.

React.useState<DateRange>([null, null])

https://dev.material-ui-pickers.dev/demo/daterangepicker

Complete Code:

import * as React from "react";
import { TextField } from "@material-ui/core";
import { DateRangePicker, DateRange, DateRangeDelimiter } from "@material-ui/pickers";

function BasicDateRangePicker() {
  const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);

  return (
    <DateRangePicker
      startText="Check-in"
      endText="Check-out"
      value={selectedDate}
      onChange={date => handleDateChange(date)}
      renderInput={(startProps, endProps) => (
        <>
          <TextField {...startProps} />
          <DateRangeDelimiter> to </DateRangeDelimiter>
          <TextField {...endProps} />
        </>
      )}
    />
  );
}

export default BasicDateRangePicker;

Upvotes: 5

Views: 32846

Answers (4)

santilp951
santilp951

Reputation: 1

It is not working for me, I have used all alpha versions and it shows this error TypeError: Cannot read property 'keyboardDate' of undefined

99 | ...other, 100 | value, 101 | onChange,

102 | inputFormat: passedInputFormat || utils.formats.keyboardDate, | ^ 103 | }; 104 | 105 | const restProps = {

and with the stable version it says it can't find DateRangePicker

Upvotes: -1

Madhuri
Madhuri

Reputation: 1100

I was also facing an error for Mui DateRangePicker with typescript, "Type 'null[]' is missing the following properties from type 'RangeInput': 0, 1"

latest versions --> "@material-ui/pickers": "^4.0.0-alpha.12" , "date-fns": "^2.16.1"

Working code:

import React from "react";
import TextField from "@material-ui/core/TextField"
import {
  DateRangePicker,
  DateRangeDelimiter,
  LocalizationProvider,
  DateRange,
} from "@material-ui/pickers"
import DateFnsUtils from "@material-ui/pickers/adapter/date-fns"

export default function BasicDateRangePicker() {
  const [selectedDate, handleDateChange] = React.useState<DateRange<Date | null>>([null, null]);

  return (
    <LocalizationProvider dateAdapter={DateFnsUtils}>
      <DateRangePicker
        startText="from"
        endText="to"
        value={selectedDate}
        onChange={(date: any) => handleDateChange(date)}
        renderInput={(startProps: any, endProps: any) => (
            <>
              <TextField {...startProps} />
              <DateRangeDelimiter> to </DateRangeDelimiter>
              <TextField {...endProps} />
            </>
          )
        }
      />
    </LocalizationProvider>
  );
}

Upvotes: 2

Ryan Cogswell
Ryan Cogswell

Reputation: 80966

Below is a working version. I've added in the LocalizationProvider and removed the <DateRange> Typescript syntax.

import React from "react";
import TextField from "@material-ui/core/TextField";
import {
  DateRangePicker,
  DateRangeDelimiter,
  LocalizationProvider
} from "@material-ui/pickers";
import DateFnsUtils from "@material-ui/pickers/adapter/date-fns"; // choose your lib

export default function BasicDateRangePicker() {
  const [selectedDate, handleDateChange] = React.useState([null, null]);

  return (
    <LocalizationProvider dateAdapter={DateFnsUtils}>
      <DateRangePicker
        startText="Check-in"
        endText="Check-out"
        value={selectedDate}
        onChange={date => handleDateChange(date)}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <DateRangeDelimiter> to </DateRangeDelimiter>
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
}

Edit DateRangePicker example

Upvotes: 4

Dekel
Dekel

Reputation: 62536

The DateRangePicker component also needs the DateFnsAdapter and the entire block should be wrapped with LocalizationProvider.

Your code should look like this:

import React from 'react';
import { TextField } from "@material-ui/core";
import DateFnsAdapter from '@material-ui/pickers/adapter/date-fns'; // choose your lib
import { DateRangePicker, DateRange, DateRangeDelimiter, LocalizationProvider } from "@material-ui/pickers";


function BasicDateRangePicker() {
  const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);

  return (
    <LocalizationProvider dateAdapter={DateFnsUtils}>
      <DateRangePicker
        startText="Check-in"
        endText="Check-out"
        value={selectedDate}
        onChange={date => handleDateChange(date)}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <DateRangeDelimiter> to </DateRangeDelimiter>
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
}

export default BasicDateRangePicker;

You can read more about the dateAdapter in the quick start and in the installation.

Upvotes: 0

Related Questions