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
Now choose the library that pickers will use to work with date. We are providing interfaces for moment and date-fns. If you are not using moment in the project (or dont have it in the bundle already) we suggest using date-fns, because it much more lightweight and will be correctly tree-shaked from the bundle.
npm i date-fns@next -S
// or
npm i moment -S
Teach pickers how to use one of that library using MuiPickersUtilsProvider
. This component takes an utils property, and makes it available down the React tree thanks to React context. It should preferably be used at the root of your component tree.
import MomentUtils from 'material-ui-pickers/utils/moment-utils';
import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils'
import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider'
function App() {
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Root />
</MuiPickersUtilsProvider>
);
}
render(<App />, document.querySelector('#app'));
We are using material-ui-icons icon font to display icons. Just add this to your html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
If you dont want to use icon font, or you are already use material-ui-icons
you can pass any icon to the components with corresponding props
Here is a quick example of how to use this package
import { TimePicker, DatePicker, DateTimePicker } from 'material-ui-pickers'
class App extends Component {
state = {
selectedDate: new Date(),
selectedTime: new Date(),
selectedDateTime: new Date()
}
handleDateChange = date => {
this.setState({ selectedDate: date })
}
handleTimeChange = time => {
this.setState({ selectedTime: time })
}
handleDateTimeChange = dateTime => {
this.setState({ selectedDateTime: dateTime })
}
render() {
const { selectedDate, selectedTime, selectedDateTime } = this.state
return (
<div>
<DatePicker
value={selectedDate}
onChange={this.handleDateChange}
/>
<TimePicker
value={selectedTime}
onChange={this.handleTimeChange}
/>
<DateTimePicker
value={selectedDateTime}
onChange={this.handleDateTimeChange}
/>
</div>
)
}
}
Here is a list of available props
Note: Any prop not recognized by the pickers and their sub-components are passed down to material-ui TextField component.
- date - string, number, Date object or Moment object (if you are using moment utils)
Prop | Type | Default | Definition |
---|---|---|---|
value | date | new Date() | Datepicker value |
format | string | 'MMMM Do' | Format string for input |
autoOk | boolean | false | Auto accept date on selection |
disablePast | boolean | false | Disable past dates |
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 | date | '1900-01-01' | Minimum selectable date |
maxDate | date | '2100-01-01' | Maximum selectable date |
onChange | func | required | Callback firing when date accepted |
invalidLabel | string | 'Unknown' | Displayed string if date cant be parsed |
emptyLabel | string | '' | Displayed string if date is null (e.g. after clear) |
okLabel | string | 'OK' | The label for the ok button |
cancelLabel | string | 'Cancel' | The label for the cancel button |
clearLabel | string | 'Clear' | The label for the clear button |
labelFunc | func | null | Allow to specify dynamic label for text field labelFunc(date, invalidLabel) . Note, that date equals null after picker is cleared. |
renderDay | func | null | Allow to specify custom renderer for day renderDay(date, selectedDate, dayInCurrentMonth) |
leftArrowIcon | react node | <Icon>keyboard_arrow_left</Icon> |
Left arrow icon |
rightArrowIcon | react node | <Icon>keyboard_arrow_right</Icon> |
Right arrow icon |
shouldDisableDate | (date: Moment) => boolean | () => false | Allow to disable custom date in calendar |
keyboard | boolean | false | Allow to manual input date to the text field |
keyboardIcon | react node | <Icon>event</Icon> |
Keyboard adornment icon |
maxDateMessage | string | 'Date should not be after maximal date' | Maximum date error message for keyboard input |
minDateMessage | string | 'Date should not be before minimal date' | Minimum date error message for keyboard input |
mask | text mask (read more here) | undefined | Text mask for keyboard-mode |
clearable | boolean | false | If true , clear button will be displayed |
TextFieldComponent | func, string | undefined | Component that should replace the default Material-UI TextField |
InputAdornmentProps | object | {} | Props to pass to keyboard input adornment |
inputAdornmentPosition | enum 'start', 'end' | 'end' | Specifies position of keyboard adornment |
Prop | Type | Default | Definition |
---|---|---|---|
value | date | new Date() | Timepicker value |
format | string | 'MMMM Do' | Moment format string for input |
autoOk | boolean | false | Auto accept time on selection |
onChange | func | required | Callback firing when date accepted |
invalidLabel | string | 'Unknown' | Displayed string if date cant be parsed |
emptyLabel | string | '' | Displayed string if date is null (e.g. after clear) |
okLabel | string | 'OK' | The label for the ok button |
cancelLabel | string | 'Cancel' | The label for the cancel button |
clearLabel | string | 'Clear' | The label for the clear button |
labelFunc | func | null | Allow to specify dynamic label for text field labelFunc(date, invalidLabel) . Note, that date equals null after picker is cleared. |
ampm | boolean | true | 12h/24h view for hour selection clock |
keyboard | boolean | false | Allow to manual input date to the text field |
keyboardIcon | react node | <Icon>event</Icon> |
Keyboard adornment icon |
mask | text mask (read more here) | undefined | Text mask for keyboard-mode |
clearable | boolean | false | If true , clear button will be displayed |
TextFieldComponent | func, string | undefined | Component that should replace the default Material-UI TextField |
InputAdornmentProps | object | {} | Props to pass to keyboard input adornment |
inputAdornmentPosition | enum 'start', 'end' | 'end' | Specifies position of keyboard adornment |
Prop | Type | Default | Definition |
---|---|---|---|
value | date | new Date() | Timepicker value |
format | string | 'MMMM Do hh:mm a' | Moment format string for input |
autoOk | boolean | false | Auto accept time on selection |
autoSubmit | boolean | true | On change show next time input (year -> date -> hour -> minute) |
disablePast | boolean | false | Disable past dates |
disableFuture | boolean | false | Disable future dates |
showTabs | boolean | false | Show date/time tabs |
openTo | one of 'year', 'date', 'hour', 'minutes' | 'date' | Open to particular view |
animateYearScrolling | boolean | false | Will animate year selection |
minDate | date | '1900-01-01' | Minimum selectable date |
maxDate | date | '2100-01-01' | Maximum selectable date |
onChange | func | required | Callback firing when date accepted |
invalidLabel | string | 'Unknown' | Displayed string if date cant be parsed |
emptyLabel | string | '' | Displayed string if date is null (e.g. after clear) |
okLabel | string | 'OK' | The label for the ok button |
cancelLabel | string | 'Cancel' | The label for the cancel button |
clearLabel | string | 'Clear' | The label for the clear button |
labelFunc | func | null | Allow to specify dynamic label for text field labelFunc(date, invalidLabel) . Note, that date equals null after picker is cleared. |
renderDay | func | null | Allow to specify custom renderer for day renderDay(date, selectedDate, dayInCurrentMonth) |
leftArrowIcon | react node | <Icon>keyboard_arrow_left</Icon> |
Left arrow icon |
rightArrowIcon | react node | <Icon>keyboard_arrow_right</Icon> |
Right arrow icon |
dateRangeIcon | react node | <Icon>date_range</Icon> |
Date tab icon |
timeIcon | react node | <Icon>access_time</Icon> |
Time tab icon |
ampm | boolean | true | 12h/24h view for hour selection clock |
shouldDisableDate | (date: Moment | Date) => boolean | () => false |
keyboard | boolean | false | Allow to manual input date to the text field |
keyboardIcon | react node | <Icon>event</Icon> |
Keyboard adornment icon |
maxDateMessage | string | 'Date should not be after maximal date' | Maximum date error message for keyboard input |
minDateMessage | string | 'Date should not be before minimal date' | Minimum date error message for keyboard input |
invalidDateMessage | string | 'Invalid Date Format' | Message, appearing when date cannot be parsed |
mask | text mask (read more here) | undefined | Text mask for keyboard-mode |
clearable | boolean | false | If true , clear button will be displayed |
TextFieldComponent | func, string | undefined | Component that should replace the default Material-UI TextField |
InputAdornmentProps | object | {} | Props to pass to keyboard input adornment |
inputAdornmentPosition | enum 'start', 'end' | 'end' | Specifies position of keyboard adornment |
For information about how to contribute, see the CONTRIBUTING file.
The project is licensed under the terms of MIT license