Components, that implements material design date and time pickers for material-ui v1
Changelog available here
Available as npm package
npm install material-ui-pickers -S
Here is a quick example of how to use this package
class App extends Component {
state = {
selectedDate: new Date(),
selectedTime: new Date()
}
handleDateChange = date => {
this.setState({ selectedDate: date })
}
handleTimeChange = time => {
this.setState({ selectedTime: time })
}
render() {
const { selectedDate, selectedTime } = this.state
return (
<div>
<DatePicker
value={selectedDate}
onChange={this.handleDateChange}
/>
<TimePicker
value={selectedTime}
onChange={this.handleDateChange}
/>
</div>
)
}
}
Here is a list of available props
Prop | Type | Default | Definition |
---|---|---|---|
value | string, number, Date object, Moment object | null | Datepicker value |
format | string | 'MMMM Do' | Moment format string for input |
autoOk | boolean | false | Auto accept date on selection |
disableFuture | boolean | false | Disable future dates |
animateYearScrolling | boolean | false | Will animate year selection (note that will work for browser supports scrollIntoView api) |
openToYearSelection | boolean | false | Open datepicker from year selection |
minDate | string, number, Date object, Moment object | '1900-01-01' | Minimum selectable date |
maxDate | string, number, Date object, Moment object | '2100-01-01' | Maximum selectable date |
Prop | Type | Default | Definition |
---|---|---|---|
value | string, number, Date object, Moment object | null | Timepicker value |
format | string | 'MMMM Do' | Moment format string for input |
autoOk | boolean | false | Auto accept time on selection |
- 24 hour displaying for timepicker (now supporting only am/pm)
- DateTime picker (wrapper above date and time)
They would be added/fixed in one of the nearest release :)
For information about how to contribute, see the CONTRIBUTING file.
The project is licensed under the terms of MIT license