Как показать значение при использовании типа даты в TextField? - PullRequest
Новая
       14

Как показать значение при использовании типа даты в TextField?

0 голосов
/ 16 апреля 2020

Я использую TextField из material-ui, и я хочу показать текущую дату в TextField, а также позволить пользователю выбрать другую дату. Если это возможно?

value={date} не появляется в TextField при использовании type="date". Я попытался найти помощь по inte rnet, но ничего не могу найти. Код ниже:

  • Любая помощь приветствуется! И заранее спасибо. 
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
          />
    );
};

Ответы [ 2 ]

1 голос
/ 16 апреля 2020

Это работает для меня. 

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. Вам просто нужно использовать момент js, чтобы преобразовать дату в тип даты материала-пользовательского интерфейса.

1 голос
/ 16 апреля 2020

Вы должны использовать MuiPickersUtilsProvider . Кроме того, вам необходимо указать дату 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>

установить зависимости: 

npm install @material-ui/pickers@3.2.8
npm install @date-io/date-fns@1.3.13
npm install date-fns@2.8.1
...