diff --git a/packages/ra-ui-materialui/src/input/DateTimeInput.js b/packages/ra-ui-materialui/src/input/DateTimeInput.js index 026d36b9ca7..4e2e5d8ec3d 100644 --- a/packages/ra-ui-materialui/src/input/DateTimeInput.js +++ b/packages/ra-ui-materialui/src/input/DateTimeInput.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import TextField from '@material-ui/core/TextField'; -import { addField, FieldTitle } from 'ra-core'; +import { useInput, FieldTitle } from 'ra-core'; import sanitizeRestProps from './sanitizeRestProps'; import InputHelperText from './InputHelperText'; @@ -11,16 +11,16 @@ const leftPad4 = leftPad(4); const leftPad2 = leftPad(2); /** - * @param {Date} v value to convert + * @param {Date} value value to convert * @returns {String} A standardized datetime (yyyy-MM-ddThh:mm), to be passed to an */ -const convertDateToString = v => { - if (!(v instanceof Date) || isNaN(v)) return ''; - const yyyy = leftPad4(v.getFullYear()); - const MM = leftPad2(v.getMonth() + 1); - const dd = leftPad2(v.getDate()); - const hh = leftPad2(v.getHours()); - const mm = leftPad2(v.getMinutes()); +const convertDateToString = value => { + if (!(value instanceof Date) || isNaN(value)) return ''; + const yyyy = leftPad4(value.getFullYear()); + const MM = leftPad2(value.getMonth() + 1); + const dd = leftPad2(value.getDate()); + const hh = leftPad2(value.getHours()); + const mm = leftPad2(value.getMinutes()); return `${yyyy}-${MM}-${dd}T${hh}:${mm}`; }; @@ -64,46 +64,64 @@ const parse = value => new Date(value); * Input component for entering a date and a time with timezone, using the browser locale */ export const DateTimeInput = ({ - className, - meta: { touched, error }, - input, - isRequired, label, + helperText, + onBlur, + onChange, + onFocus, options, source, resource, - helperText, + validate, ...rest -}) => ( - - } - label={ - - } - InputLabelProps={{ - shrink: true, - }} - {...options} - {...sanitizeRestProps(rest)} - value={input.value} - /> -); +}) => { + const { + id, + input, + isRequired, + meta: { error, touched }, + } = useInput({ + format, + onBlur, + onChange, + onFocus, + parse, + resource, + source, + type: 'datetime-local', + validate, + ...rest, + }); + + return ( + + } + label={ + + } + InputLabelProps={{ + shrink: true, + }} + {...options} + {...sanitizeRestProps(rest)} + /> + ); +}; DateTimeInput.propTypes = { classes: PropTypes.object, @@ -121,4 +139,4 @@ DateTimeInput.defaultProps = { options: {}, }; -export default addField(DateTimeInput, { format, parse }); +export default DateTimeInput;