Wrapper for Material UI Time and Date picker component
Component, that joins Material UI`s pickers into the one component, one input and 2 dialogs, appearing one by one.
Due to support of React 16 it was required to change the logic of this component work. Because of each ref should have an owner and material-ui components have refs inside their implementation you should pass created component from material-ui to this datetimepicker via props
do
import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog'; import TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog'; <DateTimePicker onChange={this.setDate} DatePicker={DatePickerDialog} TimePicker={TimePickerDialog} />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
- Material UI (Don`t use this package without material-ui, please)
- React
Here is a quick example to get you started, it's all you need:
npm install material-ui-datetimepickerimport 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 ( <DateTimePicker onChange={this.setDate} DatePicker={DatePickerDialog} TimePicker={TimePickerDialog} /> ); } }Note that each of this props applied by default
import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog'; import TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog'; <DateTimePicker format='MMM DD, YYYY hh:mm A' timePickerDelay={150} returnMomentDate={false} // if true will return moment object className='datetime-container' textFieldClassName='datetime-input' defaultTime={null} // will accept Date or moment name='picker' // form value name datePickerMode='portrait' // or landscape openToYearSelection={false} disableYearSelection={false} hideCalendarDate={false} firstDayOfWeek={1} minutesStep={1} showCurrentDateByDefault={false} clearIcon={<ClearIcon />} // set null to not render nothing // available callbacks onChange={() => {}} onTimePickerShow={() => {}} onDatePickerShow={() => {}} onDateSelected={() => {}} onTimeSelected={() => {}} shouldDisableDate={() => {}} DatePicker={DatePickerDialog} TimePicker={TimePickerDialog} // styles clearIconStyle={{ }} textFieldStyle={{ }} style={{ }} // root timePickerBodyStyle={{ }} />You can apply any of material ui Text Field props to the root.
<DateTimePicker floatingLabelFixed floatingLabelText="Get my date" floatingLabelFocusStyle={{ marginTop: '10px' }} disabled={false} errorText='Required' id="some-id" fullWidth={false} />For information about how to contribute, see the CONTRIBUTING file.
The project is licensed under the terms of MIT license