Material UI Date & Time picker
Wrapper for Material UI Time and Date picker component
Demo
Component, that joins Material UI`s pickers into the one component, one input and 2 dialogs, appearing one by one.
We are recommending to use your custom wrapper outside of this component to store your custom props, and not pass Dialogs each time you use this package, because it should be solved in one of next material-ui versions
Dependencies
- Material UI (Don`t use this package without material-ui, please)
- React
Getting Started
Here is a quick example to get you started, it's all you need:
npm install material-ui-datetimepicker
Simple usage
import React from 'react';import DateTimePicker from 'material-ui-datetimepicker';import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog'import TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog'; Component state = dateTime: null this { return <DateTimePicker = = = /> ; }
Advanced
Note that each of this props applied by default
import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog';import TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog'; <DateTimePicker = // /// ='MMM DD, YYYY hh:mm A' = = // ='datetime-container' ='datetime-input' ='picker' // ='portrait' // = = = = = = = // // = = = = = = = = // = = = // =/>
Customizing input
You can apply any of material ui Text Field props to the root.
<DateTimePicker ="Get my date" = = ='Required' ="some-id" =/>
Contributing
For information about how to contribute, see the CONTRIBUTING file.
LICENSE
The project is licensed under the terms of MIT license