Change display date format

Author: screamman-ssh

src/calendar.js

@@ -1,6 +1,6 @@
 import fetch from "./utils/fetch.js"
 import DBcrud from "./utils/DBcrud.js"
-import { customTimePicker } from "./utils/utilities.js"
+import { customTimePicker, convertDateFormat } from "./utils/utilities.js"
 const db = new DBcrud()
 const alertModal = new bootstrap.Modal('#alertModal')
 const confirmButton = document.getElementById("confirm-change")
@@ -13,7 +13,7 @@ const addTaskCalendarModal = (date) => {
     <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title">Add Task on ${date}</h5>
+          <h5 class="modal-title">Add Task on ${convertDateFormat(date)}</h5>
           <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
@@ -71,7 +71,7 @@ const taskDetailCalendarModal = (task) => {
   <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
       <div class="modal-header" style="background-color:${task.color};" >
-        <h5 class="modal-title" id="exampleModalLongTitle">Due ${`${task.start} ${task.time.H}:${task.time.M}`}</h5>
+        <h5 class="modal-title" id="exampleModalLongTitle">Due ${`${convertDateFormat(task.start)} ${task.time.H}:${task.time.M}`}</h5>
         <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>

src/index.js

@@ -1,6 +1,6 @@
 import DBcrud from "./utils/DBcrud.js";
 import fetch from "./utils/fetch.js";
-import {customTimePicker, calTime, colorScale} from "./utils/utilities.js"
+import {customTimePicker, calTime, colorScale, convertDateFormat} from "./utils/utilities.js"
 const db = new DBcrud();
 var modalHasShow = false
 
@@ -124,7 +124,7 @@ const returnCard = (cards) => {
   <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
       <div class="modal-header" style="background-color:${colorScale(perc)};" >
-        <h5 class="modal-title" id="exampleModalLongTitle">Due ${`${card.start} ${card.time.H}:${card.time.M}`}</h5>
+        <h5 class="modal-title" id="exampleModalLongTitle">Due ${`${convertDateFormat(card.start)} ${card.time.H}:${card.time.M}`}</h5>
         <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -175,13 +175,13 @@ const returnDoneCard = (cards) => {
   <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
       <div class="modal-header" style="background-color: gray;" >
-        <h5 class="modal-title" id="exampleModalLongTitle">Due ${`${card.start} ${card.time.H}:${card.time.M}`}</h5>
+        <h5 class="modal-title" id="exampleModalLongTitle">Due ${`${convertDateFormat(card.start)} ${card.time.H}:${card.time.M}`}</h5>
         <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
-        <p class="due-text">Done : ${card.done}</p>
+        <p class="due-text">Done : ${convertDateFormat((card.done.split(" "))[0])} ${(card.done.split(" "))[1]}</p>
         <h6>${card.title}</h6>
         <p>"${card.detail}"</p>
       </div>

src/utils/utilities.js

@@ -34,6 +34,13 @@ const calTime = (d, h, m) => {
     return Math.round(difDate / (1000 * 60));
 };
 
+//convert date time format
+const convertDateFormat = (date) =>{
+    var d = new Date(date);
+    var strArray = d.toString().split(" ").slice(0, 4)
+    return `${strArray[0]} ${strArray[2]} ${strArray[1]} ${strArray[3]}`
+}
+
 //calculate the code color for each task by its different time from current time
 const colorScale = (perc) => {
     var r, g, b = 0;
@@ -48,4 +55,4 @@ const colorScale = (perc) => {
     return "#" + ("000000" + h.toString(16)).slice(-6);
 };
 
-export {customTimePicker, calTime, colorScale}
+export {customTimePicker, calTime, colorScale, convertDateFormat}