fix: fix date formatting issues

AAISS · Nov 30, 2023 · 54dca2d · 54dca2d
1 parent 2f17b4d
commit 54dca2d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 17 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -27,6 +27,7 @@
     "jwt-decode": "^4.0.0",
     "prettier": "^3.1.0",
     "react": "^18.2.0",
+    "react-date-object": "^2.1.8",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
     "typescript": "^5.2.2"

diff --git a/frontend/src/components/item-card/item-card.jsx b/frontend/src/components/item-card/item-card.jsx
@@ -4,6 +4,9 @@ import { Button, Card, CardActions, CardContent, CardHeader, Chip, Divider, Stac
 import PropTypes from 'prop-types';
 import { Helper } from '../../utils/Helper.js';
 import MoreInfoModal from './more-info-modal';
+import DateObject from 'react-date-object';
+import persian from "react-date-object/calendars/persian";
+import persian_en from "react-date-object/locales/persian_en";
 
 export const Presenter = ({ presenterName }) => (
   <Stack flexDirection="row" alignItems="center" gap={1}>
@@ -145,10 +148,20 @@ const ItemCard = ({
             {Helper.omitLongString(description, 50)}
           </Typography>
           <Typography variant="body1" sx={{ fontSize: 14 }} color="text.secondary">
-            From: {new Date(startDate).toLocaleString('fa-IR-u-nu-latn').replace(/:\d{2}$/, '')}
+            From: {new DateObject({
+            date: new Date(startDate),
+            format: "YYYY/MM/DD, HH:mm",
+            calendar: persian,
+            locale: persian_en,
+          }).format()}
           </Typography>
           <Typography variant="body1" sx={{ fontSize: 14 }} color="text.secondary">
-            To: {new Date(endDate).toLocaleString('fa-IR-u-nu-latn').replace(/:\d{2}$/, '')}
+            To: {new DateObject({
+            date: new Date(endDate),
+            format: "YYYY/MM/DD, HH:mm",
+            calendar: persian,
+            locale: persian_en,
+          }).format()}
           </Typography>
           <Divider sx={{ my: 1 }} />
           <Presenter presenterName={presenterName} />

diff --git a/frontend/src/pages/schedule/useSchedulePage.js b/frontend/src/pages/schedule/useSchedulePage.js
@@ -1,6 +1,8 @@
 import {useAPI} from "../../providers/APIProvider/APIProvider.jsx";
 import {useEffect, useState} from "react";
-import {Helper} from "../../utils/Helper.js";
+import DateObject from 'react-date-object';
+import persian from "react-date-object/calendars/persian";
+import persian_en from "react-date-object/locales/persian_en";
 
 export default function useSchedulePage() {
     const {
@@ -21,15 +23,21 @@ export default function useSchedulePage() {
     useEffect(() => {
         if (workshopsData == null) return
         setTableWorkshopsData(workshopsData.map(item => {
-            const startDate = new Date(item["start_date"]).toLocaleString('fa-IR-u-nu-latn')
-              .replace(/:\d{2}$/, '')
-            const endDate = new Date(item["end_date"]).toLocaleString('fa-IR-u-nu-latn')
-              .replace(/:\d{2}$/, '')
+            const startDate = new DateObject({
+                date: new Date(item["start_date"]),
+                calendar: persian,
+                locale: persian_en,
+            })
+            const endDate = new DateObject({
+                date: new Date(item["end_date"]),
+                calendar: persian,
+                locale: persian_en,
+            })
             return {
                 Title: item.name,
-                date: startDate.split(',')[0],
-                Starts: startDate.split(',')[1],
-                Ends: endDate.split(',')[1],
+                date: startDate.format("YYYY/MM/DD"),
+                Starts: startDate.format("HH:mm"),
+                Ends: endDate.format("HH:mm"),
             }
         }))
     }, [workshopsData])
@@ -39,15 +47,21 @@ export default function useSchedulePage() {
         setTablePresentationsData(presentationsData.filter(element => {
             return element.name != null
         }).map(item => {
-            const startDate = new Date(item["start_date"]).toLocaleString('fa-IR-u-nu-latn')
-              .replace(/:\d{2}$/, '')
-            const endDate = new Date(item["end_date"]).toLocaleString('fa-IR-u-nu-latn')
-              .replace(/:\d{2}$/, '')
+            const startDate = new DateObject({
+                date: new Date(item["start_date"]),
+                calendar: persian,
+                locale: persian_en,
+            })
+            const endDate = new DateObject({
+                date: new Date(item["end_date"]),
+                calendar: persian,
+                locale: persian_en,
+            })
             return {
                 Title: item.name,
-                date: startDate.split(',')[0],
-                Starts: startDate.split(',')[1],
-                Ends: endDate.split(',')[1],
+                date: startDate.format("YYYY/MM/DD"),
+                Starts: startDate.format("HH:mm"),
+                Ends: endDate.format("HH:mm"),
             }
         }))
     }, [presentationsData])