我正在尝试按照文档上的代码设置一个重要的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;
答案 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>
);
}
答案 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 start和installation中进一步了解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