KendoReact DatePicker TypeError：date.getTime 不是函数
我收到此错误，但不太确定原因。谁能帮助我吗？
我想利用 kendoreact，通过使用日期选择器输入来显示数据库中的数据。但是当我想显示数据时，却出现错误。
我为数据选择器制作了一个可重用的组件，代码：
const detailDatePickerComponent = props => {
const { errors, label, show, width, value = null, min, max, name, groupClass, disabled } = props;
let propertyName = name;
if (name.indexOf('.') !== -1) {
const splitName = name.split('.');
propertyName = splitName[splitName.length - 1];
}
return (
<Form.Group className={groupClass}>
<Form.Label>{label}</Form.Label>
<DatePicker
data-rules="haha"
name={name}
value={value || null}
width={width}
show={show}
min={min}
max={max}
toggleButton={props => (
<ToggleButton {...props} style={{ fontSize: 10 }}>
<span className="k-icon k-i-calendar" />
</ToggleButton>
)}
defaultValue={value}
format="dd / MMMM / yyyy"
className={errors && errors[name] && 'error'}
disabled={disabled}
/>
{errors &&
(Array.isArray(errors[propertyName]?.message) ? (
errors[propertyName]?.message.map(m => <span className="error d-block">{m.toLowerCase()}</span>)
) : (
<span className="error">
{errors[propertyName]?.message.replace(name, label?.toLowerCase() || propertyName.toLowerCase())}
</span>
))}
</Form.Group>
);
};
并且我使用 data.period_form 的不同文件
const [data, setData] = useState([]);
useEffect(() => {
setLoading(true);
CouponApi.find(id)
.then(res => {
setData(res);
setLoading(false);
})
.catch(() => setLoading(false));
}, []);
return (
//...code
<div className="col-md-3">
<DetailDatePicker name="payment_date" label="EVENT DATE" value={data.period_from} />
</div>
)
值中的组件：2007-05-28T00:00:00Z
I got this error, but not really sure why. Can anyone help me ?
i want to take advantage of kendoreact, by using date picker input to display data in database. But when I want to display the data, what comes out is an error.
I make a reusable component for data picker, the code :
const detailDatePickerComponent = props => {
const { errors, label, show, width, value = null, min, max, name, groupClass, disabled } = props;
let propertyName = name;
if (name.indexOf('.') !== -1) {
const splitName = name.split('.');
propertyName = splitName[splitName.length - 1];
}
return (
<Form.Group className={groupClass}>
<Form.Label>{label}</Form.Label>
<DatePicker
data-rules="haha"
name={name}
value={value || null}
width={width}
show={show}
min={min}
max={max}
toggleButton={props => (
<ToggleButton {...props} style={{ fontSize: 10 }}>
<span className="k-icon k-i-calendar" />
</ToggleButton>
)}
defaultValue={value}
format="dd / MMMM / yyyy"
className={errors && errors[name] && 'error'}
disabled={disabled}
/>
{errors &&
(Array.isArray(errors[propertyName]?.message) ? (
errors[propertyName]?.message.map(m => <span className="error d-block">{m.toLowerCase()}</span>)
) : (
<span className="error">
{errors[propertyName]?.message.replace(name, label?.toLowerCase() || propertyName.toLowerCase())}
</span>
))}
</Form.Group>
);
};
and I use the component in the different file
const [data, setData] = useState([]);
useEffect(() => {
setLoading(true);
CouponApi.find(id)
.then(res => {
setData(res);
setLoading(false);
})
.catch(() => setLoading(false));
}, []);
return (
//...code
<div className="col-md-3">
<DetailDatePicker name="payment_date" label="EVENT DATE" value={data.period_from} />
</div>
)
value of data.period_form : 2007-05-28T00:00:00Z
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试替换
value = {data.period_from}，用value = {new Date（data.period_from）}。我认为这里的问题是Kendo不会自动将字符串转换为日期对象，因此您必须在将其转发为Prop之前手动进行操作。
Try to replace
value={data.period_from} withvalue={new Date(data.period_from)}.I think the issue here is that kendo doesn't automatically convert string to date object so you have to do it manually before forwarding it as prop.
确保值状态具有
日期类型。onChangeprop，考虑将其从格式onChange = {value =＆gt; settime（value）}onChange = {value =＆gt; settime（ new Date（value））}valueprop，还使用new Date（您的日期）将其转换为日期，以确保其具有<代码>日期Make sure the value state has
Datetype.onChangeprop, consider changing it from the formatonChange={value=>setTime(value)}toonChange={value=>setTime(new Date(value))}valueprop, also convert it it to date usingnew Date(your date)To make sure it has theDatetype