MUI date/time pickers for use in react-admin applications
npm install react-admin-mui-dateinputs
npm install react-admin-mui-dateinputs --save
`
Usage
!date-time-picker.PNG
This package provides a DateInput, TimeInput, and DateTimeInput based on MUI v5 pickers from the MUI-X library, for use in a react-admin application.
`jsx
import React from 'react';
import { Create, TextInput, SimpleForm } from 'react-admin';
import { DateTimeInput } from 'react-admin-mui-dateinputs';
export const TestForm = () => {
const logWhenOpen = val => console.log('Opened!:', value);
return (
label="Date/Time"
onOpen={logWhenOpen}
toolbarActions={['cancel', 'accept']}
/>
);
};
`
These pickers use MUI-X's LocalizationProvider, which is supplied their AdapterDateFns as a dateAdapter. Dates are formatted as ISO strings by default, though props parse and format are passed to react-admin's useInput hook, allowing date formats and input values to be configured.
All three inputs accept most react-admin input props, including validate, defaultValue, fullWidth, helperText, sx, etc., and (obviously) require source and label to be defined in order to work correctly as form inputs or filters.
Additional functionality can be derived from the prop functions onOpen and onClose, which are called during their corresponding events. See above example for a simple demonstration.
Props such as disableFuture, mineData, etc. from MUI's Date Time Picker props are passed directly to the underlying picker component through the prop pickerOptions`.