React Admin - date time fields zobrazit datum a cas

src/components/Admin/AdminLayout.tsx

@@ -33,5 +33,25 @@ const AppMenuBar = () => {
 }
 
 export const AdminLayout = (props: LayoutProps) => {
-  return <Layout {...props} appBar={AppMenuBar} />
+  return (
+    <>
+      <Layout {...props} appBar={AppMenuBar} />
+      <Stack
+        style={{
+          position: 'fixed',
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 100,
+          padding: 6,
+          textAlign: 'center',
+          backgroundColor: '#efefef',
+        }}
+      >
+        <Typography color={'#000000'} fontSize={'0.8em'}>
+          Všetky časy sú uvedené v časovom pásme Europe/Bratislava
+        </Typography>
+      </Stack>
+    </>
+  )
 }

src/components/Admin/custom/DateTimeField.tsx

@@ -0,0 +1,18 @@
+import {FC} from 'react'
+import {DateField, FieldProps} from 'react-admin'
+
+export const DateTimeField: FC<FieldProps> = ({source}) => (
+  <DateField
+    source={source}
+    showTime={true}
+    options={{
+      timeZone: 'Europe/Bratislava',
+      hourCycle: 'h24',
+      hour: '2-digit',
+      minute: '2-digit',
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+    }}
+  />
+)

src/components/Admin/custom/MyDateTimeInput.tsx

@@ -0,0 +1,6 @@
+import {FC} from 'react'
+import {DateTimeInput, DateTimeInputProps} from 'react-admin'
+
+export const MyDateTimeInput: FC<DateTimeInputProps> = ({source, ...rest}) => (
+  <DateTimeInput source={source} helperText={'Please provide time in Europe/Bratislava timezone'} {...rest} />
+)

src/components/Admin/custom/PostPreview.tsx

@@ -23,7 +23,7 @@ export const PostPreview: FC = () => {
                   caption={formData?.caption ?? ''}
                   short_text={formData?.short_text ?? ''}
                   details={formData?.details ?? ''}
-                  added_at={formData?.added_at ?? ''}
+                  added_at={formData?.added_at ?? new Date().toISOString()}
                   visible_after={formData?.visible_after ?? ''}
                   visible_until={formData?.visible_until ?? ''}
                   sites={formData?.sites ?? []}

src/components/Admin/resources/cms/post/PostCreate.tsx

@@ -1,7 +1,8 @@
 import {FC} from 'react'
-import {ArrayInput, DateTimeInput, FormTab, required, SimpleFormIterator, TabbedForm, TextInput} from 'react-admin'
+import {ArrayInput, FormTab, required, SimpleFormIterator, TabbedForm, TextInput} from 'react-admin'
 
 import {MyCreate} from '@/components/Admin/custom/MyCreate'
+import {MyDateTimeInput} from '@/components/Admin/custom/MyDateTimeInput'
 import {PostPreview} from '@/components/Admin/custom/PostPreview'
 import {SitesCheckboxInput} from '@/components/Admin/custom/SitesCheckboxInput'
 
@@ -13,9 +14,9 @@ export const PostCreate: FC = () => {
           <TextInput source="caption" fullWidth validate={required()} />
           <TextInput source="short_text" fullWidth validate={required()} />
           <TextInput source="details" multiline fullWidth />
-          <DateTimeInput source="added_at" fullWidth disabled />
-          <DateTimeInput source="visible_after" fullWidth validate={required()} />
-          <DateTimeInput source="visible_until" fullWidth validate={required()} />
+          <MyDateTimeInput source="added_at" fullWidth disabled defaultValue={new Date().toISOString()} />
+          <MyDateTimeInput source="visible_after" fullWidth validate={required()} />
+          <MyDateTimeInput source="visible_until" fullWidth validate={required()} />
           <SitesCheckboxInput source="sites" validate={required()} />
         </FormTab>
         <FormTab label="links">

src/components/Admin/resources/cms/post/PostEdit.tsx

@@ -1,6 +1,7 @@
 import {FC} from 'react'
-import {ArrayInput, DateTimeInput, FormTab, required, SimpleFormIterator, TabbedForm, TextInput} from 'react-admin'
+import {ArrayInput, FormTab, required, SimpleFormIterator, TabbedForm, TextInput} from 'react-admin'
 
+import {MyDateTimeInput} from '@/components/Admin/custom/MyDateTimeInput'
 import {MyEdit} from '@/components/Admin/custom/MyEdit'
 import {PostPreview} from '@/components/Admin/custom/PostPreview'
 import {SitesCheckboxInput} from '@/components/Admin/custom/SitesCheckboxInput'
@@ -12,9 +13,9 @@ export const PostEdit: FC = () => (
         <TextInput source="caption" fullWidth validate={required()} />
         <TextInput source="short_text" fullWidth validate={required()} />
         <TextInput source="details" multiline fullWidth />
-        <DateTimeInput source="added_at" fullWidth disabled />
-        <DateTimeInput source="visible_after" fullWidth validate={required()} />
-        <DateTimeInput source="visible_until" fullWidth validate={required()} />
+        <MyDateTimeInput source="added_at" fullWidth disabled />
+        <MyDateTimeInput source="visible_after" fullWidth validate={required()} />
+        <MyDateTimeInput source="visible_until" fullWidth validate={required()} />
         <SitesCheckboxInput source="sites" validate={required()} />
       </FormTab>
       <FormTab label="links">

src/components/Admin/resources/cms/post/PostList.tsx

@@ -1,6 +1,7 @@
 import {FC} from 'react'
-import {Datagrid, DateField, FunctionField, List, RaRecord, TextField} from 'react-admin'
+import {Datagrid, FunctionField, List, RaRecord, TextField} from 'react-admin'
 
+import {DateTimeField} from '@/components/Admin/custom/DateTimeField'
 import {SitesArrayField} from '@/components/Admin/custom/SitesArrayField'
 import {TruncatedTextField} from '@/components/Admin/custom/TruncatedTextField'
 
@@ -10,9 +11,9 @@ export const PostList: FC = () => (
       <TextField source="caption" />
       <TruncatedTextField source="short_text" maxTextWidth={50} />
       <TruncatedTextField source="details" maxTextWidth={50} />
-      <DateField source="added_at" />
-      <DateField source="visible_after" />
-      <DateField source="visible_until" />
+      <DateTimeField source="added_at" />
+      <DateTimeField source="visible_after" />
+      <DateTimeField source="visible_until" />
       <SitesArrayField source="sites" />
       <FunctionField<RaRecord>
         source="links"

src/components/Admin/resources/cms/post/PostShow.tsx

@@ -1,6 +1,7 @@
 import {FC} from 'react'
-import {ArrayField, Datagrid, DateField, Show, SimpleShowLayout, Tab, TabbedShowLayout, TextField} from 'react-admin'
+import {ArrayField, Datagrid, Show, SimpleShowLayout, Tab, TabbedShowLayout, TextField} from 'react-admin'
 
+import {DateTimeField} from '@/components/Admin/custom/DateTimeField'
 import {MyShowActions} from '@/components/Admin/custom/MyShowActions'
 import {SitesArrayField} from '@/components/Admin/custom/SitesArrayField'
 
@@ -12,9 +13,9 @@ export const PostShow: FC = () => (
           <TextField source="caption" />
           <TextField source="short_text" />
           <TextField source="details" />
-          <DateField source="added_at" />
-          <DateField source="visible_after" />
-          <DateField source="visible_until" />
+          <DateTimeField source="added_at" />
+          <DateTimeField source="visible_after" />
+          <DateTimeField source="visible_until" />
           <SitesArrayField source="sites" />
         </SimpleShowLayout>
       </Tab>

src/components/Admin/resources/competition/competition/CompetitionShow.tsx

@@ -3,7 +3,6 @@ import {FC} from 'react'
 import {
   ArrayField,
   Datagrid,
-  DateField,
   FunctionField,
   NumberField,
   RaRecord,
@@ -13,6 +12,7 @@ import {
   TextField,
 } from 'react-admin'
 
+import {DateTimeField} from '@/components/Admin/custom/DateTimeField'
 import {MyShow} from '@/components/Admin/custom/MyShow'
 import {SitesArrayField} from '@/components/Admin/custom/SitesArrayField'
 import {TruncatedTextField} from '@/components/Admin/custom/TruncatedTextField'
@@ -45,8 +45,8 @@ export const CompetitionShow: FC = () => (
               <NumberField source="year" />
               <NumberField source="season_code" />
               <TextField source="school_year" />
-              <DateField source="start" />
-              <DateField source="end" />
+              <DateTimeField source="start" />
+              <DateTimeField source="end" />
               <FunctionField<RaRecord>
                 source="publication_set"
                 label="Publication count"

src/components/Admin/resources/competition/competition/UpcomingOrCurrentEvent.tsx

@@ -1,6 +1,5 @@
 import {FC} from 'react'
 import {
-  DateField,
   FunctionField,
   Labeled,
   NumberField,
@@ -11,6 +10,8 @@ import {
   useRedirect,
 } from 'react-admin'
 
+import {DateTimeField} from '@/components/Admin/custom/DateTimeField'
+
 export const UpcomingOrCurrentEvent: FC = () => {
   const record = useRecordContext()
   const redirect = useRedirect()
@@ -25,13 +26,13 @@ export const UpcomingOrCurrentEvent: FC = () => {
         <NumberField source="year" />
         <NumberField source="season_code" />
         <TextField source="school_year" />
-        <DateField source="start" />
-        <DateField source="end" />
+        <DateTimeField source="start" />
+        <DateTimeField source="end" />
         <TextField source="additional_name" />
 
         <TextField source="registration_link.url" />
-        <DateField source="registration_link.start" />
-        <DateField source="registration_link.end" />
+        <DateTimeField source="registration_link.start" />
+        <DateTimeField source="registration_link.end" />
         <TextField source="registration_link.additional_info" />
 
         <FunctionField<RaRecord>

src/components/Admin/resources/competition/event/EventCreate.tsx

@@ -1,17 +1,9 @@
 import {Checkbox, FormControlLabel} from '@mui/material'
 import {FC, useState} from 'react'
-import {
-  DateTimeInput,
-  Labeled,
-  NumberInput,
-  ReferenceInput,
-  required,
-  SelectInput,
-  SimpleForm,
-  TextInput,
-} from 'react-admin'
+import {Labeled, NumberInput, ReferenceInput, required, SelectInput, SimpleForm, TextInput} from 'react-admin'
 
 import {MyCreate} from '@/components/Admin/custom/MyCreate'
+import {MyDateTimeInput} from '@/components/Admin/custom/MyDateTimeInput'
 
 export const EventCreate: FC = () => {
   // initial false, necakame, ze mame registration link uz ready
@@ -29,8 +21,8 @@ export const EventCreate: FC = () => {
       <SimpleForm>
         <NumberInput source="year" helperText="ročník súťaže, napr. 48" fullWidth validate={required()} />
         <TextInput source="school_year" helperText="napr. 2023/2024" fullWidth validate={required()} />
-        <DateTimeInput source="start" fullWidth validate={required()} />
-        <DateTimeInput source="end" fullWidth validate={required()} />
+        <MyDateTimeInput source="start" fullWidth validate={required()} />
+        <MyDateTimeInput source="end" fullWidth validate={required()} />
         <ReferenceInput source="competition" reference="competition/competition">
           <SelectInput fullWidth validate={required()} />
         </ReferenceInput>
@@ -43,8 +35,8 @@ export const EventCreate: FC = () => {
             <>
               <NumberInput source="registration_link.id" fullWidth disabled />
               <TextInput source="registration_link.url" fullWidth validate={required()} />
-              <DateTimeInput source="registration_link.start" fullWidth validate={required()} />
-              <DateTimeInput source="registration_link.end" fullWidth validate={required()} />
+              <MyDateTimeInput source="registration_link.start" fullWidth validate={required()} />
+              <MyDateTimeInput source="registration_link.end" fullWidth validate={required()} />
               <TextInput source="registration_link.additional_info" fullWidth />
             </>
           </Labeled>

src/components/Admin/resources/competition/event/EventEdit.tsx

@@ -1,16 +1,8 @@
 import {Checkbox, FormControlLabel} from '@mui/material'
 import {FC, useState} from 'react'
-import {
-  DateTimeInput,
-  Labeled,
-  NumberInput,
-  ReferenceInput,
-  required,
-  SelectInput,
-  SimpleForm,
-  TextInput,
-} from 'react-admin'
+import {Labeled, NumberInput, ReferenceInput, required, SelectInput, SimpleForm, TextInput} from 'react-admin'
 
+import {MyDateTimeInput} from '@/components/Admin/custom/MyDateTimeInput'
 import {MyEdit} from '@/components/Admin/custom/MyEdit'
 
 export const EventEdit: FC = () => {
@@ -31,8 +23,8 @@ export const EventEdit: FC = () => {
       <SimpleForm>
         <NumberInput source="year" helperText="ročník súťaže, napr. 48" fullWidth validate={required()} />
         <TextInput source="school_year" helperText="napr. 2023/2024" fullWidth validate={required()} />
-        <DateTimeInput source="start" fullWidth validate={required()} />
-        <DateTimeInput source="end" fullWidth validate={required()} />
+        <MyDateTimeInput source="start" fullWidth validate={required()} />
+        <MyDateTimeInput source="end" fullWidth validate={required()} />
         <ReferenceInput source="competition" reference="competition/competition">
           <SelectInput fullWidth validate={required()} />
         </ReferenceInput>
@@ -45,8 +37,8 @@ export const EventEdit: FC = () => {
             <>
               <NumberInput source="registration_link.id" fullWidth disabled />
               <TextInput source="registration_link.url" fullWidth validate={required()} />
-              <DateTimeInput source="registration_link.start" fullWidth validate={required()} />
-              <DateTimeInput source="registration_link.end" fullWidth validate={required()} />
+              <MyDateTimeInput source="registration_link.start" fullWidth validate={required()} />
+              <MyDateTimeInput source="registration_link.end" fullWidth validate={required()} />
               <TextInput source="registration_link.additional_info" fullWidth />
             </>
           </Labeled>

src/components/Admin/resources/competition/event/EventList.tsx

@@ -1,5 +1,7 @@
 import {FC} from 'react'
-import {Datagrid, DateField, FunctionField, List, NumberField, RaRecord, ReferenceField, TextField} from 'react-admin'
+import {Datagrid, FunctionField, List, NumberField, RaRecord, ReferenceField, TextField} from 'react-admin'
+
+import {DateTimeField} from '@/components/Admin/custom/DateTimeField'
 
 export const EventList: FC = () => (
   <List>
@@ -8,8 +10,8 @@ export const EventList: FC = () => (
       <NumberField source="year" />
       <NumberField source="season_code" />
       <TextField source="school_year" />
-      <DateField source="start" />
-      <DateField source="end" />
+      <DateTimeField source="start" />
+      <DateTimeField source="end" />
       <TextField source="additional_name" />
       <TextField source="registration_link.url" />
       <FunctionField<RaRecord>

src/components/Admin/resources/competition/event/EventShow.tsx

@@ -2,7 +2,6 @@ import {FC} from 'react'
 import {
   ArrayField,
   Datagrid,
-  DateField,
   NumberField,
   ReferenceField,
   SimpleShowLayout,
@@ -11,6 +10,7 @@ import {
   TextField,
 } from 'react-admin'
 
+import {DateTimeField} from '@/components/Admin/custom/DateTimeField'
 import {MyShow} from '@/components/Admin/custom/MyShow'
 
 export const EventShow: FC = () => (
@@ -22,13 +22,13 @@ export const EventShow: FC = () => (
           <NumberField source="year" />
           <NumberField source="season_code" />
           <TextField source="school_year" />
-          <DateField source="start" />
-          <DateField source="end" />
+          <DateTimeField source="start" />
+          <DateTimeField source="end" />
           <TextField source="additional_name" />
 
           <TextField source="registration_link.url" />
-          <DateField source="registration_link.start" />
-          <DateField source="registration_link.end" />
+          <DateTimeField source="registration_link.start" />
+          <DateTimeField source="registration_link.end" />
           <TextField source="registration_link.additional_info" />
         </SimpleShowLayout>
       </Tab>

src/components/Admin/resources/competition/semester/SemesterCreate.tsx

@@ -1,7 +1,6 @@
 import {FC} from 'react'
 import {
   CheckboxGroupInput,
-  DateTimeInput,
   NumberInput,
   ReferenceArrayInput,
   ReferenceInput,
@@ -12,6 +11,7 @@ import {
 } from 'react-admin'
 
 import {MyCreate} from '@/components/Admin/custom/MyCreate'
+import {MyDateTimeInput} from '@/components/Admin/custom/MyDateTimeInput'
 
 export const SemesterCreate: FC = () => (
   <MyCreate>
@@ -22,8 +22,8 @@ export const SemesterCreate: FC = () => (
       <NumberInput source="year" helperText="ročník súťaže, napr. 48" fullWidth validate={required()} />
       <NumberInput source="season_code" fullWidth validate={required()} />
       <TextInput source="school_year" helperText="napr. 2023/2024" fullWidth />
-      <DateTimeInput source="start" fullWidth validate={required()} />
-      <DateTimeInput source="end" fullWidth validate={required()} />
+      <MyDateTimeInput source="start" fullWidth validate={required()} />
+      <MyDateTimeInput source="end" fullWidth validate={required()} />
       <TextInput source="additional_name" fullWidth />
       {/* nechavam viditelne disabled nech sa rozhodneme, co s tym. BE nam posiela ID, 
           neviem, ci vieme updatnut cely objekt tym, ze ho pribalim, ako v EventEdit...