-
Notifications
You must be signed in to change notification settings - Fork 80
Material ui v1 datepickers example
NewOldMax edited this page Aug 9, 2020
·
4 revisions
You can easily use material-ui-pickers
with this library (example)
import React from "react";
import { DatePicker } from "material-ui-pickers";
import { ValidatorComponent } from "react-material-ui-form-validator";
class ValidatedDatePicker extends ValidatorComponent {
renderValidatorComponent() {
const {
errorMessages,
validators,
requiredError,
helperText,
validatorListener,
...rest
} = this.props;
const { isValid } = this.state;
return (
<DatePicker
{...rest}
error={!isValid}
helperText={(!isValid && this.getErrorMessage()) || helperText}
/>
);
}
}
export default ValidatedDatePicker;
import React from "react";
import Button from "@material-ui/core/Button";
import { ValidatorForm } from "react-material-ui-form-validator";
import ValidatedDatePicker from "./ValidatedDatePicker";
class MyForm extends React.Component {
state = {
date: ""
};
handleDateChange = date => {
this.setState({ date });
};
handleSubmit() {
// your submit logic
}
render() {
const { date } = this.state;
return (
<ValidatorForm ref="form" onSubmit={this.handleSubmit}>
<ValidatedDatePicker
label="date"
onChange={this.handleDateChange}
name="date"
value={date}
validators={["required"]}
errorMessages={["date is required"]}
format="DD/MM/YYYY"
/>
<Button type="submit">submit</Button>
</ValidatorForm>
);
}
}
export default MyForm;