How to use @material-ui/pickers - 5 common examples
To help you get started, we’ve selected a few @material-ui/pickers examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mui-org / material-ui-pickers / docs / pages / guides / StaticComponents.example.jsx View on Github 
function StaticPickers() {
const [value, handleDateChange] = useState(new Date());
// you can past mostly all available props, like minDate, maxDate, autoOk and so on
const { pickerProps, wrapperProps } = useStaticState({
value,
onChange: handleDateChange,
});
return (
<>
<div>
<button>
Clear date ({value && value.toJSON()})
</button>
</div>var renderDatePicker = function renderDatePicker() {
return _react["default"].createElement(_pickers.KeyboardDatePicker, fieldProps);
};var renderDateTimePicker = function renderDateTimePicker() {
return _react["default"].createElement(_pickers.KeyboardDateTimePicker, fieldProps);
};var renderTimePicker = function renderTimePicker() {
return _react["default"].createElement(_pickers.KeyboardTimePicker, fieldProps);
};}, otherProps.InputProps)
});
var renderDatePicker = function renderDatePicker() {
return _react["default"].createElement(_pickers.KeyboardDatePicker, fieldProps);
};
var renderTimePicker = function renderTimePicker() {
return _react["default"].createElement(_pickers.KeyboardTimePicker, fieldProps);
};
var renderDateTimePicker = function renderDateTimePicker() {
return _react["default"].createElement(_pickers.KeyboardDateTimePicker, fieldProps);
};
return _react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
utils: _dateFns["default"],
locale: LOCALES[locale]
}, type === 'date' && renderDatePicker(), type === 'time' && renderTimePicker(), type === 'datetime' && renderDateTimePicker());
};@material-ui/pickers
React components, that implements material design pickers for material-ui v4
