import * as React from 'react' ; import { memo , FC } from 'react' ; import PropTypes from 'prop-types' ; import get from 'lodash/get' ; import Typography , { TypographyProps } from '@material-ui/core/Typography' ; import { useRecordContext } from 'ra-core' ; import sanitizeFieldRestProps from './sanitizeFieldRestProps' ; import { PublicFieldProps , InjectedFieldProps , fieldPropTypes } from './types' ; const toLocaleStringSupportsLocales = ( ( ) => { try { new Date ( ) . toLocaleString ( 'i' ) ; } catch ( error ) { return error instanceof RangeError ; } return false ; } ) ( ) ; see https example export const DateField = memo ( props => { const { className , emptyText , locales , options , showTime = false , source , ... rest } = props ; const record = useRecordContext ( props ) ; if ( ! record ) { return null ; } const value = get ( record , source ) ; if ( value == null || value === '' ) { return emptyText ? ( < Typography component = "span" variant = "body2" className = { className } { ... sanitizeFieldRestProps ( rest ) } > { emptyText } < /Typography>) : null; } const date = value instanceof Date ? value : new Date ( value ) ; const dateString = showTime ? toLocaleStringSupportsLocales ? date . toLocaleString ( locales , options ) : date . toLocaleString ( ) : toLocaleStringSupportsLocales ? date . toLocaleDateString ( locales , options ) : date . toLocaleDateString ( ) ; return ( < Typography component = "span" variant = "body2" className = { className } { ... sanitizeFieldRestProps ( rest ) } > { dateString } < /Typography>); } ) ; DateField . defaultProps = { addLabel : true , } ; DateField . propTypes = { ... Typography . propTypes , ... fieldPropTypes , locales : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . arrayOf ( PropTypes . string ) , ] ) , options : PropTypes . object , showTime : PropTypes . bool , } ; DateField . displayName = 'DateField' ; export interface DateFieldProps extends PublicFieldProps , InjectedFieldProps , TypographyProps { locales ? : string | string [ ] ; options ? : object ; showTime ? : boolean ; } export default DateField ;