gpt4 book ai didi

reactjs - 在 TextField 中使用日期类型时如何显示值?

转载 作者:行者123 更新时间:2023-12-02 16:42:43 25 4
gpt4 key购买 nike

我正在使用 material-ui 中的 TextField,我想在 TextField 中显示当前日期,并允许用户选择另一个日期。如果可能呢?

当使用 type="date" 时,value={date} 不会出现在 TextField 中。我试图在互联网上寻找一些帮助,但找不到任何东西。代码如下:

  • 感谢任何帮助!提前致谢。

import React, { useState } from 'react';
import { TextField } from '@material-ui/core';
import { useForm } from 'react-hook-form';

export const AddDate: React.FC = () => {
const [date, setDate] = useState(
new Date().getDate() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getFullYear(),
);

// handles when user changes input in date inputfield
const handleChangeDate = (e: React.ChangeEvent<HTMLInputElement>): void => {
setDate(e.target.value);
};

return(
{/*Text field - date*/}
<TextField
name="date"
id="date"
label="Date"
type="date"
InputLabelProps={{ shrink: true }}
inputRef={register}
value={date}
onChange={handleChangeDate}
fullWidth
required
/>
);
};

最佳答案

这对我有用。

import React, { useState, useEffect } from "react";
import { TextField } from "@material-ui/core";
import "./styles.css";
import moment from 'moment';

const App =()=> {
const [date, setDate] = useState(
moment(new Date()).format("YYYY-MM-DD")
);

// handles when user changes input in date inputfield
const handleChangeDate = e => {
setDate(e.target.value);
};

console.log(date)

return (
<>
<TextField
name="date"
id="date"
label="Date"
type="date"
InputLabelProps={{ shrink: true }}
value={date}
onChange={handleChangeDate}
fullWidth
required
/>
</>
);
}

export default App;

我只是稍微更改了您的代码。只有变化来自 useState。你只需要使用 moment js 将日期转换为 material-ui 日期类型。

关于reactjs - 在 TextField 中使用日期类型时如何显示值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61244957/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com