import React , { FC } from 'react' ; import { MaterialDatepicker } from '@energyweb/origin-ui-core' ; import { Dayjs } from 'dayjs' ; import { useTranslation } from 'react-i18next' ; interface DateFilterProps { value : Dayjs ; handleFilterChange : ( newValue : Dayjs ) => void ; label : string ; } const DateFilterComponent = ( { value , handleFilterChange , label , } ) => { const handleChange = ( eventValue ) => { handleFilterChange ( eventValue ) ; } ; return ( < MaterialDatepicker field = { { name : 'dateFilter' , label : label , textFieldProps : { margin : 'dense' , } , } } value = { value || null } onChange = { handleChange } variant = "filled" / > ) ; } ; export const StartDateFilter = ( props ) => { const { t } = useTranslation ( ) ; return ( < DateFilterComponent label = { t ( 'exchange.myOrders.startDate' ) } { ... props } />); } ; export const EndDateFilter = ( props ) => { const { t } = useTranslation ( ) ; return ( < DateFilterComponent label = { t ( 'exchange.myOrders.endDate' ) } { ... props } />); } ;