英文:
React datetime picker misbehaving
问题
我有以下来自react-datetime库的<Datetime>选择器。
import React from "react";
import Datetime from "react-datetime";
import moment from "moment";
import "./styles.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
fromDateTime: "",
};
}
render() {
return (
<div className="App">
<Datetime
value={this.state.fromDateTime}
dateFormat="YYYY-MM-DD"
timeFormat="HH:mm"
onChange={(momentObj) => {
if (momentObj && momentObj.isValid && momentObj.isValid()) {
const formattedDateTime = momentObj.format("YYYY-MM-DD HH:mm");
this.setState({ fromDateTime: formattedDateTime });
}
}}
/>
</div>
);
}
}
我可以复制粘贴日期2023-06-15 00:30到输入框中。但一旦我复制粘贴了，就不能使用删除和退格按钮来修改日期。为什么会这样？
您可以在这个codesandbox中尝试这种行为。
注：在codesandbox中，日历始终是打开的。但在我的笔记本电脑上不是这样的。当我点击输入框内部时，日历会打开，当我点击外部时，它会关闭。
英文:
I have following <Datetime> picker from react-datetime library.
import React from "react";
import Datetime from "react-datetime";
import moment from "moment";
import "./styles.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
fromDateTime: "",
};
}
render() {
return (
<div className="App">
<Datetime
value={this.state.fromDateTime}
dateFormat="YYYY-MM-DD"
timeFormat="HH:mm"
onChange={(momentObj) => {
if (momentObj && momentObj.isValid && momentObj.isValid()) {
const formattedDateTime = momentObj.format("YYYY-MM-DD HH:mm");
this.setState({ fromDateTime: formattedDateTime });
}
}}
/>
</div>
);
}
}
I can copy pasted date 2023-06-15 00:30 into the input field. But once I copy pasted, I cannot use delete and backspace button to modify that date. Why is it so?
You can try out this behavior in [https://codesandbox.io/s/keen-tereshkova-h7pmjc?file=/src/App.jsthis codesandbox].
PS: In codesandbox, the calendar is always open. This is not the case on my laptop. Calendar opens when I click inside input box and closes when I click outside.
答案1
得分: 1
一次，如果您在日历上单击日期，它将返回一个不再是日期的值，例如2021-06-15 00:0。
因此，将非日期值更改为可更新的，如：
if (momentObj && momentObj.isValid && momentObj.isValid()) {
const formattedDateTime = momentObj.format("YYYY-MM-DD HH:mm");
this.setState({ fromDateTime: formattedDateTime });
} else {
this.setState({ fromDateTime: momentObj.toString() });
}
英文:
Once, if you click the date on calendar, it returns value which is no longer date like 2021-06-15 00:0.
So, change the non-date values to be updatable. like :
if (momentObj && momentObj.isValid && momentObj.isValid()) {
const formattedDateTime = momentObj.format("YYYY-MM-DD HH:mm");
this.setState({ fromDateTime: formattedDateTime });
} else {
this.setState({ fromDateTime: momentObj.toString() });
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论