Настройка значения по умолчанию в текстовом поле «Дата» | Реагировать материал

Я новичок в Material UI. Итак, здесь я использую Date типа Textfield. По умолчанию в текстовом поле отображается «дд-мм-гггг». Но я хочу по умолчанию отображать строковое значение, например «Добавить DOB (ММ / ДД / ГГГГ)». Я пробовал несколько способов, не принимая строковое значение. Пожалуйста, дайте мне знать, как я могу этого добиться.

import React from 'react';
import { render } from 'react-dom';
import TextField from 'material-ui/TextField';


const App = () => (
  <div style={styles}>
    <TextField
                                id="date"
                                label="Add Date of Birth"
                                type="date"
                                name="DateOfBirth"
                                defaultValue="Add DOB"
                                className="form-field"
                                InputLabelProps={{
                                    shrink: true,
                               }}
                            />
  </div>
);

render(<App />, document.getElementById('root'));

reactjs material-ui react-material
person Jeyanth Kanagaraj    schedule 19.06.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен, какой по умолчанию вы спрашиваете. Я предполагаю здесь две вещи: значение по умолчанию для даты или какой-то текст, сопровождающий дату.

Если вы хотите установить значение по умолчанию для TextField, лучше всего установить свойство value для компонента с состоянием, как в value={stateValue}. Если вы хотите добавить текст к дате, вы можете попробовать Входные украшения в пользовательском интерфейсе материала.

Пример кода для этого:

import React from "react";
import InputAdornment from "@material-ui/core/InputAdornment";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles(theme => ({
  container: {
    display: "flex",
    flexDirection: "column",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200
  },
  adornment: {
    width: 110
  },
  dense: {
    marginTop: 19
  },
  menu: {
    width: 200
  }
}));

export default function TextFields() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    date: "1993-11-01"
  });

  const handleChange = name => event => {
    console.log(event.target.value);
    setValues({ ...values, [name]: event.target.value });
  };

  return (
    <form className={classes.container} noValidate autoComplete="off">
      <TextField
        id="date"
        label="Add Date of Birth"
        type="date"
        name="DateOfBirth"
        // defaultValue="Add DOB"
        InputProps={{
          startAdornment: (
            <InputAdornment className={classes.adornment} position="start">
              Add DOB
            </InputAdornment>
          )
        }}
        value={values.date}
        className={classes.textField}
        onChange={handleChange("date")}
        InputLabelProps={{
          shrink: true
        }}
      />

      <TextField
        id="standard-name"
        label="Date Text"
        className={classes.textField}
        value={values.date}
        onChange={handleChange("date")}
        margin="normal"
      />
    </form>
  );
}

Demo Codesandbox: TextField - дата

person Indra Lukmana    schedule 20.06.2019
comment
Привет @IndraLukmana, После выбора даты мне нужно удалить текст (Добавить DOB). - person Jeyanth Kanagaraj; 25.06.2019