How I can save the value for date from Date pickers? - reactjs

Question

I want save value for date from this code, I use vscode and reactjs and Material package.
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import TextField from '#material-ui/core/TextField';
const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
width: 200,
},
});
function DatePickers(props) {
const { classes } = props;
//console.log(props)
return (
<form className={classes.container} noValidate>
<TextField
id="date"
label="Birthday"
type="date"
defaultValue="2017-05-24"
className={classes.textField}
InputLabelProps={{
shrink: true,
}}
/>
</form>
);
}
DatePickers.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(DatePickers);

Answer 1

In order to save the selected date, your code should look something like this,
import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const styles = theme => ({
container: {
display: "flex",
flexWrap: "wrap"
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
width: 200
}
});
class DatePickers extends Component {
state = {
date: "2017-05-24"
};
handleChange = event => {
this.setState({ date: event.target.value });
};
render() {
const { classes } = this.props;
console.log(this.state);
return (
<form className={classes.container} noValidate>
<TextField
id="date"
label="Birthday"
type="date"
value={this.state.date}
onChange={this.handleChange}
className={classes.textField}
InputLabelProps={{
shrink: true
}}
/>
</form>
);
}
}
DatePickers.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(DatePickers);