材质UI日期范围选择器

时间:2020-05-13 18:59:48

标签: reactjs material-ui

我正在尝试按照文档上的代码设置一个重要的ui日期范围选择器示例,但这给我一个错误,TypeError:undefined不是一个函数。

我以前从未见过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;

4 个答案:

答案 0 :(得分:1)

以下是有效版本。我已经添加了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>
  );
}

Edit DateRangePicker example

答案 1 :(得分:0)

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 startinstallation中进一步了解dateAdapter

答案 2 :(得分:0)

我也遇到打字稿的Mui DateRangePicker错误, “类型'null []'缺少类型'RangeInput'中的以下属性:0、1”

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

工作代码:

template<typename Derived>
CppAD::AD<double>  operator+(const MatrixBase<Derived>& lhs, const CppAD::AD<double> & rhs) {
  return lhs.derived().coeff(0, 0) + rhs;
                     //^^^^^^^^^^^ No need for an implicit conversion
}

答案 3 :(得分:-1)

它对我不起作用,我使用了所有 alpha 版本,它显示此错误 类型错误:无法读取未定义的属性“keyboardDate”

99 | ...其他, 100 |价值, 101 | onChange,

<块引用>

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

在稳定版本中,它说找不到 DateRangePicker