0.1.10 • Published 6 years ago
mui-date-picker v0.1.10
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;