Skip to content

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;