Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
material-ui-datetimepicker-forked
Advanced tools
Wrapper above material ui date and time pickers -- forked for a fix
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.
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
Here is a quick example to get you started, it's all you need:
npm install material-ui-datetimepicker
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 (
<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
value={new Date()} // picker value moment/string/number/js Date
format='MMM DD, YYYY hh:mm A'
timePickerDelay={150}
returnMomentDate={false} // if true will return moment object
className='datetime-container'
textFieldClassName='datetime-input'
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
FAQs
Wrapper above material ui date and time pickers
The npm package material-ui-datetimepicker-forked receives a total of 15 weekly downloads. As such, material-ui-datetimepicker-forked popularity was classified as not popular.
We found that material-ui-datetimepicker-forked demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.