reactjs - ¿Cómo mostrar un valor al usar el tipo de fecha en TextField?

Estoy usando TextField de material-ui, y quiero mostrar la fecha actual en TextField, y también permitir al usuario elegir otra fecha. ¿Es posible?

El value={date} no aparece en el TextField al usar type="date". He intentado buscar ayuda en internet, pero no puedo encontrar nada. El código está a continuación:

• ¡Cualquier ayuda es apreciada! Y gracias de antemano.

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
          />
    );
};

Respuesta #1

Esto funciona para mí.

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;

Acabo de cambiar tu código un poco. El único cambio proviene del useState. Solo tienes que usar moment js para convertir la fecha al tipo de fecha de material-ui.

Respuesta #2

Tienes que usar MuiPickersUtilsProvider. Además, deberías necesitar el formateador de fechas moment.js

import DateFnsUtils from '@date-io/date-fns';
import "react-datepicker/dist/react-datepicker.css";
import {
    MuiPickersUtilsProvider,
    KeyboardDatePicker,
} from '@material-ui/pickers';
import moment from 'moment';
import Input from '@material-ui/core/Input';

<MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
            input={<Input/>}
            disableToolbar
            variant="inline"
            format="yyyy-mm-dd"
            margin="normal"
            value={value}
            onChange={event => {
                onValueChange(moment(event).format("YYYY-MM-DD"))
            }}
        />
</MuiPickersUtilsProvider>

instalar dependencias:

npm install @material-ui/[email 
npm install @date-io/[email 
npm install [email