react-admin-date-inputs

<DateInput>, <TimeInput> and <DateTimeInput> components for React-Admin.

Installation

npm install react-admin-date-inputs --save

Usage

You have to include an icon font to display the icons on the picker. This is mentioned on the bottom of the material-ui-pickers installation page.

// on index.html
<linkrel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

importReactfrom'react';import{Edit,TextInput,TabbedForm,FormTab,}from'react-admin'import{DateInput,TimeInput,DateTimeInput}from'react-admin-date-inputs';exportconstNewsEdit=(props)=>(<Edittitle={<NewsTitle/>}{...props}><TabbedForm><FormTab><LongTextInputsource="title"validate={required}/><DateInputsource="startDate"label="Start date"options={{format: 'DD/MM/YYYY'}}/><TimeInputsource="startTime"label="Start time"options={{format: 'HH:mm:ss'}}/><DateTimeInputsource="endDate"label="End time"options={{format: 'DD/MM/YYYY, HH:mm:ss',ampm: false,clearable: true}}/></FormTab></TabbedForm></Edit>);

Options prop

The options prop is passed down to the pickers. Documentation for these options can be found in the material-ui-pickers documentation for the component you're trying to use.

providerOptions prop

If you want to use a date parser utils library other than date-fns or you want a locale other than english, you can pass the providerOptions prop:

importDateFnsUtilsfrom'@date-io/date-fns';importMomentUtilsfrom'material-ui-pickers/utils/moment-utils';importfrLocalefrom"date-fns/locale/fr";
...
<DateInputsource="date"label="Date using moment"providerOptions={{utils: MomentUtils}}/><DateInputsource="date"label="Date in French!"providerOptions={{utils: DateFnsUtils,locale: frLocale}}/>

NOTE: When specifying a locale you must also specify the utils, even if it's the default DateFnsUtils.

Development

You can build sources:

npm run build

License

This library is licensed under the MIT Licence.