英文:
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"><Datetimevalue={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"><Datetimevalue={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() });}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论