mui-date-picker

Material UI Date Picker

Simple MUI Date Picker React Component

https://vchin.github.io/mui-date-picker

Quick Start

Install

npm install --save mui-date-picker @material-ui/core @material-ui/icons react

Use in a MUI Dialog

import React, { PureComponent } from 'react';
import { IconButton, Dialog, DialogContent, FormControl, InputLabel, Input, InputAdornment, withStyles } from '@material-ui/core';
import { CalendarToday } from '@material-ui/icons';
import { format } from 'date-fns';
import { Calendar } from 'mui-date-picker';

const DemoDialog = ({ open, onClose, onDateChange, classes }) => (
  <Dialog open={open} onClose={onClose}>
    <DialogContent className={classes.content}>
      <Calendar date={new Date()} onDateChange={onDateChange} />
    </DialogContent>
  </Dialog>
);

const StyledDialog = withStyles({
  content: {
    padding: 0,
    '&:first-child': {
      padding: 0,
    },
  },
})(DemoDialog);

class DialogDemo extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      isDialogOpen: false,
      date: '',
    };
  }

  handleButtonClick = () => {
    this.setState({
      isDialogOpen: true,
    });
  };

  handleDialogClose = () => {
    this.setState({
      isDialogOpen: false,
    });
  };

  handleDateChange = (date) => {
    this.handleDialogClose();
    this.setState({
      date: format(date, 'MMM D, YYYY'),
    });
  };

  render() {
    const { isDialogOpen, date } = this.state;
    return (
      <div>
        <FormControl>
          <InputLabel>Date</InputLabel>
          <Input
            value={date}
            disabled
            type="text"
            readOnly
            endAdornment={
              <InputAdornment position="end">
                <IconButton onClick={this.handleButtonClick}>
                  <CalendarToday />
                </IconButton>
              </InputAdornment>
            }
          />
        </FormControl>
        <StyledDialog open={isDialogOpen} onClose={this.handleDialogClose} onDateChange={this.handleDateChange} />
      </div>
    );
  }
}

export default DialogDemo;