https://github.com/dmtrkovalenko/material-ui-datetimepicker
[UNMAINTAINED] Wrapper for Material UI Date and Time picker components
https://github.com/dmtrkovalenko/material-ui-datetimepicker
date-time datetime datetimepicker material-ui picker-component
Last synced: 9 months ago
JSON representation
[UNMAINTAINED] Wrapper for Material UI Date and Time picker components
- Host: GitHub
- URL: https://github.com/dmtrkovalenko/material-ui-datetimepicker
- Owner: dmtrKovalenko
- License: mit
- Created: 2017-07-31T09:53:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-12T15:13:41.000Z (over 7 years ago)
- Last Synced: 2025-04-22T04:08:18.744Z (9 months ago)
- Topics: date-time, datetime, datetimepicker, material-ui, picker-component
- Language: JavaScript
- Homepage: https://dmtrkovalenko.github.io/material-ui-datetimepicker/
- Size: 3.65 MB
- Stars: 31
- Watchers: 5
- Forks: 9
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Deprecated
We suggest migrate to [material-ui v1](https://material-ui-next.com/guides/migration-v0.x) and use [material-ui-pickers](https://github.com/dmtrKovalenko/material-ui-pickers) for date/time pickers.
This project will not be longer supported.
# Material UI Date & Time picker
> Wrapper for [Material UI](http://material-ui.com) Time and Date picker component
# [Demo](https://dmtrkovalenko.github.io/material-ui-datetimepicker/)
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:
```sh
npm install material-ui-datetimepicker
```
### Simple usage
```jsx
import React from 'react';
import DateTimePicker from 'material-ui-datetimepicker';
import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog'
import TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog';
class Demo extends React.Component {
state = {
dateTime: null
}
setDate = (dateTime) => this.setState({ dateTime })
render() {
return (
);
}
}
```
### Advanced
Note that each of this props applied by default
```jsx
import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog';
import TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog';
} // set null to not render nothing
// available callbacks
onChange={() => {}}
onTimePickerShow={() => {}}
onDatePickerShow={() => {}}
onDateSelected={() => {}}
onTimeSelected={() => {}}
shouldDisableDate={() => {}}
DatePicker={DatePickerDialog}
TimePicker={TimePickerDialog}
// styles
clearIconStyle={{ }}
textFieldStyle={{ }}
style={{ }} // root
timePickerBodyStyle={{ }}
/>
```
### Customizing input
You can apply any of material ui [Text Field](http://www.material-ui.com/#/components/text-field) props to the root.
```jsx
```
## Contributing
For information about how to contribute, see the [CONTRIBUTING](https://github.com/dmtrKovalenko/material-ui-datetimepicker/blob/master/CONTRIBUTE.md) file.
## LICENSE
The project is licensed under the terms of [MIT license](https://github.com/dmtrKovalenko/material-ui-datetimepicker/blob/master/LICENSE)