significantly improved datepicker

frontend/src/helperComponents/Anime.svelte

@@ -11,7 +11,10 @@
     import { Button } from "flowbite-svelte";
     import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType";
     import Rating from "./Rating.svelte";
-    import convertAniListDateToString from "../helperFunctions/convertAniListDateToString";
+    import {
+        convertAniListDateToString,
+        convertAniListDateToDate,
+    } from "../helperFunctions/convertAniListDateIn";
     import AnimeTable from "./AnimeTable.svelte";
     import type {
         MALAnime,
@@ -25,7 +28,10 @@
         StatusOptions,
     } from "../helperTypes/StatusTypes";
     import type { AniListUpdateVariables } from "../anilist/types/AniListTypes";
-    import convertDateStringToAniList from "../helperFunctions/convertDateStringToAniList";
+    import {
+        convertDateStringToAniList,
+        convertDateToAniList,
+    } from "../helperFunctions/convertDateToAniList";
     import {
         AniListDeleteEntry,
         AniListUpdateEntry,
@@ -39,6 +45,7 @@
     import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte";
     import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
     import Datepicker from "./Datepicker.svelte";
+    const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
 
     let isAniListLoggedIn: boolean;
     let isMalLoggedIn: boolean;
@@ -79,10 +86,10 @@
         (option) =>
             currentAniListAnime.data.MediaList.status === option.aniList,
     )[0];
-    const startedAtDate = convertAniListDateToString(
+    let startedAtDate: Date | null = convertAniListDateToDate(
         currentAniListAnime.data.MediaList.startedAt,
     );
-    const completedAtDate = convertAniListDateToString(
+    let completedAtDate: Date | null = convertAniListDateToDate(
         currentAniListAnime.data.MediaList.completedAt,
     );
 
@@ -104,19 +111,34 @@
             notes: currentAniListAnime.data.MediaList.notes,
         });
 
-    if (isMalLoggedIn)
+    if (isMalLoggedIn) {
+        let startDate = "";
+        let finishDate = "";
+        if (currentMalAnime.my_list_status.start_date !== "") {
+            const startArray = re.exec(
+                currentMalAnime.my_list_status.start_date,
+            );
+            startDate = `${startArray[2]}-${startArray[3]}-${startArray[1]}`;
+        }
+        if (currentMalAnime.my_list_status.finish_date !== "") {
+            const finishArray = re.exec(
+                currentMalAnime.my_list_status.finish_date,
+            );
+            finishDate = `${finishArray[2]}-${finishArray[3]}-${finishArray[1]}`;
+        }
         AddAnimeServiceToTable({
             id: `m-${currentMalAnime.id}`,
             title: currentMalAnime.title,
             service: "MyAnimeList",
             progress: currentMalAnime.my_list_status.num_episodes_watched,
             status: currentMalAnime.my_list_status.status,
-            startedAt: currentMalAnime.my_list_status.start_date,
+            startedAt: startDate,
-            completedAt: currentMalAnime.my_list_status.finish_date,
+            completedAt: finishDate,
             score: currentMalAnime.my_list_status.score,
             repeat: currentMalAnime.my_list_status.num_times_rewatched,
             notes: currentMalAnime.my_list_status.comments,
         });
+    }
 
     if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0)
         AddAnimeServiceToTable({
@@ -138,8 +160,8 @@
             rating: number;
             episodes: number;
             status: StatusOption;
-            startedAt: string;
+            startedAt: Date | null;
-            completedAt: string;
+            completedAt: Date | null;
             repeat: number;
             notes: string;
         } = {
@@ -151,8 +173,8 @@
                 mal: "",
                 simkl: "",
             },
-            startedAt: "",
+            startedAt: null,
-            completedAt: "",
+            completedAt: null,
             repeat: 0,
             notes: "",
         };
@@ -189,8 +211,8 @@
                 score: submitData.rating,
                 repeat: submitData.repeat,
                 notes: submitData.notes,
-                startedAt: convertDateStringToAniList(submitData.startedAt),
+                startedAt: convertDateToAniList(startedAtDate),
-                completedAt: convertDateStringToAniList(submitData.completedAt),
+                completedAt: convertDateToAniList(completedAtDate),
             };
             await AniListUpdateEntry(body).then(
                 (value: AniListGetSingleAnime) => {
@@ -245,6 +267,20 @@
                         value.my_list_status.comments = malAnimeReturn.comments;
                         return value;
                     });
+                    let startDate = "";
+                    let finishDate = "";
+                    if (currentMalAnime.my_list_status.start_date !== "") {
+                        const startArray = re.exec(
+                            currentMalAnime.my_list_status.start_date,
+                        );
+                        startDate = `${startArray[2]}-${startArray[3]}-${startArray[1]}`;
+                    }
+                    if (currentMalAnime.my_list_status.finish_date !== "") {
+                        const finishArray = re.exec(
+                            currentMalAnime.my_list_status.finish_date,
+                        );
+                        finishDate = `${finishArray[2]}-${finishArray[3]}-${finishArray[1]}`;
+                    }
                     AddAnimeServiceToTable({
                         id: `m-${currentMalAnime.id}`,
                         title: currentMalAnime.title,
@@ -252,8 +288,8 @@
                         progress:
                             currentMalAnime.my_list_status.num_episodes_watched,
                         status: currentMalAnime.my_list_status.status,
-                        startedAt: currentMalAnime.my_list_status.start_date,
+                        startedAt: startDate,
-                        completedAt: currentMalAnime.my_list_status.finish_date,
+                        completedAt: finishDate,
                         score: currentMalAnime.my_list_status.score,
                         repeat: currentMalAnime.my_list_status
                             .num_times_rewatched,
@@ -414,7 +450,6 @@
     }
 </script>
 
-/B
 <form on:submit|preventDefault={handleSubmit} class="container pt-3 pb-10">
     <h1 class="text-white font-bold text-left text-xl pb-3">
         {title}
@@ -559,34 +594,16 @@
                         class="text-left block mb-2 text-sm font-medium text-white"
                         >Date Started</label
                     >
-                    <div class="relative max-w-sm">
+                    <Datepicker
-                        <div
+                        bind:value={startedAtDate}
-                            class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none"
+                        color="slate"
-                        >
+                        dateFormat={{
-                            <svg
+                            year: "numeric",
-                                class="w-4 h-4 text-gray-400"
+                            month: "2-digit",
-                                aria-hidden="true"
+                            day: "2-digit",
-                                xmlns="http://www.w3.org/2000/svg"
+                        }}
-                                fill="currentColor"
+                        showActionButtons
-                                viewBox="0 0 20 20"
+                    />
-                            >
-                                <path
-                                    d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
-                                />
-                            </svg>
-                        </div>
-                        <input
-                            id="startedAt"
-                            type="date"
-                            name="startedAt"
-                            class="border text-sm rounded-lg
-                                    focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 bg-gray-700 border-gray-600
-                                    placeholder-gray-400 text-white"
-                            value={startedAtDate}
-                            placeholder="Date Started"
-                        />
-                        <Datepicker showActionButtons />
-                    </div>
                 </div>
                 <div>
                     <label
@@ -594,33 +611,16 @@
                         class="text-left block mb-2 text-sm font-medium text-white"
                         >Date Completed</label
                     >
-                    <div class="relative max-w-sm">
+                    <Datepicker
-                        <div
+                        bind:value={completedAtDate}
-                            class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none"
+                        color="slate"
-                        >
+                        dateFormat={{
-                            <svg
+                            year: "numeric",
-                                class="w-4 h-4 text-gray-400"
+                            month: "2-digit",
-                                aria-hidden="true"
+                            day: "2-digit",
-                                xmlns="http://www.w3.org/2000/svg"
+                        }}
-                                fill="currentColor"
+                        showActionButtons
-                                viewBox="0 0 20 20"
+                    />
-                            >
-                                <path
-                                    d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
-                                />
-                            </svg>
-                        </div>
-                        <input
-                            id="completedAt"
-                            type="date"
-                            name="completedAt"
-                            class="border text-sm rounded-lg
-                                    block w-full ps-10 p-2.5 bg-gray-700 border-gray-600
-                                    placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
-                            value={completedAtDate}
-                            placeholder="Date Completed"
-                        />
-                    </div>
                 </div>
                 <div>
                     <label

frontend/src/helperComponents/Datepicker.svelte

@@ -61,6 +61,8 @@
                 return "focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400";
             case "purple":
                 return "focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400";
+            case "slate":
+                return "focus:ring-2 focus:ring-slate-500 dark:focus:ring-slate-400";
             default:
                 return "";
         }
@@ -80,6 +82,8 @@
                 return "bg-yellow-100 dark:bg-yellow-900";
             case "purple":
                 return "bg-purple-100 dark:bg-purple-900";
+            case "slate":
+                return "bg-slate-100 dark:bg-slate-900";
             default:
                 return "";
         }
@@ -293,7 +297,7 @@
             <input
                 bind:this={inputElement}
                 type="text"
-                class="w-full px-4 py-2 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(
+                class="w-full px-4 py-3 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(
                     color,
                 )} {inputClass}"
                 {placeholder}

frontend/src/helperFunctions/convertAniListDateIn.ts

@@ -0,0 +1,37 @@
+import moment from "moment";
+
+const convertAniListDateToString = (date: {
+  year?: number;
+  month?: number;
+  day?: number;
+}): string => {
+  if (
+    date.year === undefined ||
+    (date.year === 0 && date.month === undefined) ||
+    (date.month === 0 && date.day === undefined) ||
+    date.day === 0
+  ) {
+    return "";
+  }
+  const newISODate = new Date(date.year, date.month - 1, date.day);
+  const newMoment = moment(newISODate);
+  return newMoment.format("MM-DD-YYYY");
+};
+
+const convertAniListDateToDate = (date: {
+  year?: number;
+  month?: number;
+  day?: number;
+}): Date | null => {
+  if (
+    date.year === undefined ||
+    (date.year === 0 && date.month === undefined) ||
+    (date.month === 0 && date.day === undefined) ||
+    date.day === 0
+  ) {
+    return null;
+  }
+  return new Date(date.year, date.month - 1, date.day);
+};
+
+export { convertAniListDateToString, convertAniListDateToDate };

frontend/src/helperFunctions/convertAniListDateToString.ts

@@ -1,17 +0,0 @@
-import moment from "moment";
-
-export default (date: {
-    year?: number,
-    month?: number,
-    day?: number,
-}): string => {
-    if (date.year === undefined || date.year === 0
-        && date.month === undefined || date.month === 0
-        && date.day === undefined || date.day === 0
-    ) {
-        return ""
-    }
-    const newISODate = new Date(date.year, date.month - 1, date.day)
-    const newMoment = moment(newISODate)
-    return newMoment.format('YYYY-MM-DD')
-}

frontend/src/helperFunctions/convertDateStringToAniList.ts

@@ -1,22 +0,0 @@
-type Date = {
-    year: number,
-    month: number,
-    day: number,
-}
-
-export default (date: string): Date => {
-    if (date === "") {
-        return {
-            year: 0,
-            month: 0,
-            day: 0,
-        }
-    }
-    const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/
-    const newDate = re.exec(date)
-    return {
-        year: Number(newDate[1]),
-        month: Number(newDate[2]),
-        day: Number(newDate[3])
-    }
-}

frontend/src/helperFunctions/convertDateToAniList.ts

@@ -0,0 +1,39 @@
+type AnilistDate = {
+  year: number;
+  month: number;
+  day: number;
+};
+
+const convertDateStringToAniList = (date: string): AnilistDate => {
+  if (date === "") {
+    return {
+      year: 0,
+      month: 0,
+      day: 0,
+    };
+  }
+  const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
+  const newDate = re.exec(date);
+  return {
+    year: Number(newDate[1]),
+    month: Number(newDate[2]),
+    day: Number(newDate[3]),
+  };
+};
+
+const convertDateToAniList = (date: Date | null): AnilistDate => {
+  if (date === null) {
+    return {
+      year: 0,
+      month: 0,
+      day: 0,
+    };
+  }
+  return {
+    year: Number(date.getFullYear()),
+    month: Number(date.getMonth()) + 1,
+    day: Number(date.getDate()),
+  };
+};
+
+export { convertDateStringToAniList, convertDateToAniList };