Skip to content

Instantly share code, notes, and snippets.

@zeusbaba
Last active February 26, 2018 08:18
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zeusbaba/c08ba245b457c245640f45df486d3fa5 to your computer and use it in GitHub Desktop.
Save zeusbaba/c08ba245b457c245640f45df486d3fa5 to your computer and use it in GitHub Desktop.
admin-on-rest using material-ui-datetimepicker as custom input component
import React, { Component } from 'react';
import DateTimePicker from 'material-ui-datetimepicker';
import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog'
import TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog';
import { Field } from 'redux-form';
const renderMyDateTimeInput = ({ input, meta: { touched, error } }) => (
// for more customisation, see https://github.com/dmtrKovalenko/material-ui-datetimepicker
<DateTimePicker
DatePicker={DatePickerDialog}
TimePicker={TimePickerDialog}
errorText={touched && error}
{...input}
/>
);
const MyDateTimeInput = ({ source }) => <Field name={source} component={renderMyDateTimeInput} />
export default MyDateTimeInput;
@zeusbaba
Copy link
Author

zeusbaba commented Oct 12, 2017

then you can use it inside admin-on-rest SimpleForm like this below;

<SimpleForm>
    <MyDateTimeInput source="datetime" />
</SimpleForm>

more docs/info at admin-on-rest

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment