材质 UI 日期范围选择器

Question

我正在尝试按照文档上的代码设置材料 ui 日期范围选择器示例，但它给了我一个错误，TypeError: undefined is not a function。

我以前从未见过 useState 后跟组件，这就是引发错误的原因。

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

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

完整代码：

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;

Answer 1

它不适合我，我使用了所有 alpha 版本，它显示此错误 TypeError：无法读取未定义的属性“keyboardDate”

99 | ...其他， 100 |价值， 101 |改变，

102 |输入格式：通过输入格式 || utils.formats.keyboardDate， | ^ 103 | }; 104 | 105 | const restProps = {

稳定版说找不到 DateRangePicker

Answer 2

我也遇到了带有打字稿的 Mui DateRangePicker 错误， “类型 'null[]' 缺少类型 'RangeInput' 的以下属性：0、1”

最新版本 --> "@material-ui/pickers": "^4.0.0-alpha.12" , “日期-fns”：“^2.16.1”

工作代码：

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

Answer 3

以下是工作版本。我添加了LocalizationProvider 并删除了<DateRange> Typescript 语法。

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

Answer 4

DateRangePicker 组件也需要DateFnsAdapter 并且整个块应该用LocalizationProvider 包裹。

您的代码应如下所示：

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;

您可以在quick start 和installation 中阅读有关dateAdapter 的更多信息。