Customizing the default value in the Date Textfield | React Material - reactjs

Question

I am new to Material UI. So, here i am using a Textfield type Date. By defaut in the textfield it shows "dd-mm-yyyy". But, i want to show an string value by default, like this "Add DOB (MM/DD/YYYY)". I tried some ways, its not taking the string value. Please let me know, how can i achieve this.
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'));

Answer 1

I'm not sure what default you are asking. I am assuming two things here: default value for the date or some kind of text accompanying the date.
If you want to set default value for the TextField it is best to set the value prop for the component with a state as in value={stateValue}. If you want to add some text to accompany the date you can try Input Adornments in the Material UI.
Code example for this:
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 - date