import React from "react" ; import { TextField as MuiTextField } from "@mui/material" ; import DateTimePicker from "@mui/lab/DateTimePicker" ; import { FieldProps } from "../../models" ; import { FieldDescription } from "../../form" ; import { LabelWithIcon } from "../components" ; import { useClearRestoreValue } from "../../hooks" ; import { formStyles } from "../styles" ; type DateTimeFieldProps = FieldProps < Date > ; category export function DateTimeField ( { name , value , setValue , autoFocus , error , showError , disabled , touched , property , includeDescription , shouldAlwaysRerender } ) { const classes = formStyles ( ) ; const internalValue = value || null ; useClearRestoreValue ( { property , value , setValue } ) ; return ( < > < DateTimePicker clearable className = { classes . input } autoFocus = { autoFocus } value = { internalValue } label = { < LabelWithIcon property = { property } / > } renderInput = { ( props ) => ( < MuiTextField { ... props } fullWidth InputProps = { { ... props . InputProps , className : classes . input } } error = { showError } variant = { "filled" } helperText = { showError ? error : null } / > ) } disabled = { disabled } onChange = { ( dateValue ) => { return setValue ( dateValue ) ; } } /> { includeDescription && < FieldDescription property = { property } />} < />); }