CSR-1503: fix issue and remove time from date logic

src/digital-components/date-picker/date-picker.vue

@@ -74,6 +74,10 @@ import loader from "@/ux-components/loader/loader";
 import store from "@/store";
 import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from "./mixins/constants";
 import { selectableDaysOptions, requiredParameter, forceTwoDigitString } from "./mixins/helpers";
+import {
+    convertDateToDateString,
+    convertDateStringToDate,
+} from "@/layouts/schedule/helpers/schedule-helper";
 
 export default {
     name: "datePicker",
@@ -110,23 +114,14 @@ export default {
         },
     },
     computed: {
-        today() {
+        todayString() {
-            if (this.todayOverrideDateString) {
+            return this.todayOverrideDateString || convertDateToDateString(new Date());
-                return new Date(this.todayOverrideDateString + "T00:00:00");
-            }
-            return new Date();
-        },
-        todayMonthIndex() {
-            return this.today.getMonth() + 1;
-        },
-        todayYearNum() {
-            return this.today.getFullYear();
         },
         todayDayIndex() {
-            return this.today.getDay();
+            return convertDateStringToDate(this.todayString).getDay();
         },
         todayDateNum() {
-            return this.today.getDate();
+            return convertDateStringToDate(this.todayString).getDate();
         },
         currentWeekStartDateNum() {
             return this.todayDayIndex >= this.todayDateNum
@@ -157,154 +152,187 @@ export default {
         fireDateClickedEvent() {
             this.$emit("date-clicked");
         },
-        getWeekStartDate(date) {
+        getWeekStartDate(dateString) {
+            const date = convertDateStringToDate(dateString);
             const dayOfWeek = date.getDay();
             // Subtract the day of the week from date to get the date of Sunday
             const sunday = new Date(date);
             sunday.setDate(sunday.getDate() - dayOfWeek);
-            return sunday;
+            return convertDateToDateString(sunday);
         },
-        getWeekEndDate(date) {
+        getWeekEndDate(dateString) {
+            const date = convertDateStringToDate(dateString);
             const dayOfWeek = date.getDay();
             const daysUntilSaturday = 6 - dayOfWeek; // Calculate the number of days until Saturday
             // Clone the given date and add the remaining days until Saturday
             const saturday = new Date(date);
             saturday.setDate(date.getDate() + daysUntilSaturday);
-            return saturday;
+            return convertDateToDateString(saturday);
         },
-        getNextWeekSunday(date) {
+        getNextWeekSunday(dateString) {
+            const date = convertDateStringToDate(dateString);
             const dayOfWeek = date.getDay();
             const daysUntilNextSunday = 7 - dayOfWeek; // Calculate the number of days until the next Sunday
             // Clone the given date and add the remaining days until Sunday
             const nextSunday = new Date(date);
             nextSunday.setDate(date.getDate() + daysUntilNextSunday);
-            return nextSunday;
+            return convertDateToDateString(nextSunday);
         },
-        getInitialViewWeeks(today, initialViewRowsToShow, preSelectedDateString) {
+        getMonthEnd(dateStr) {
+            // convert string to date, do date calc, then return a string back
+            const date = new Date(dateStr.split("-")[0], parseInt(dateStr.split("-")[1]), 0);
+            return convertDateToDateString(date);
+        },
+        getInitialViewWeeks(todayString, initialViewRowsToShow, preSelectedDateString) {
             // TODO: this only is for future direction; need to create logic for past direction
             const weeks = [];
+            let weekStartDate = this.getWeekStartDate(todayString);
+            let weekEndDate = this.getWeekEndDate(todayString);
 
-            if (preSelectedDateString) initialViewRowsToShow = 26;
+            if (preSelectedDateString) {
+                let preSelectedDateMonthEnd = this.getMonthEnd(preSelectedDateString);
+                let weekIncludesPreSelectedMonthEnd = false;
+                let i = 0;
+                while (!weekIncludesPreSelectedMonthEnd) {
+                    if (i > 0) {
+                        weekStartDate = this.getNextWeekSunday(weekEndDate);
+                        weekEndDate = this.getWeekEndDate(weekStartDate);
 
-            let weekStartDate = this.getWeekStartDate(today);
+                        if (
-            let weekEndDate = this.getWeekEndDate(today);
+                            (preSelectedDateMonthEnd > weekStartDate &&
-            for (let i = 0; i < initialViewRowsToShow; i++) {
+                                preSelectedDateMonthEnd < weekEndDate) ||
-                if (i > 0) {
+                            preSelectedDateMonthEnd === weekStartDate ||
-                    weekStartDate = this.getNextWeekSunday(weekEndDate);
+                            preSelectedDateMonthEnd === weekEndDate
-                    weekEndDate = this.getWeekEndDate(weekStartDate);
+                        ) {
-                }
+                            weekEndDate = preSelectedDateMonthEnd;
-                weeks.push({
+                            weekIncludesPreSelectedMonthEnd = true;
-                    weekNum: i + 1,
-                    weekStartDate: weekStartDate,
-                    weekEndDate: weekEndDate,
-                });
-                if (
-                    preSelectedDateString &&
-                    new Date(preSelectedDateString + "T00:00:00") < weekEndDate
-                ) {
-                    break;
-                }
-            }
-
-            // are any of these weeks split between two months?
-            // NOTE: a week split between two months counts as 2 weeks
-            const hasSplitWeek = (week) => {
-                return week.weekStartDate.getMonth() !== week.weekEndDate.getMonth() ? true : false;
-            };
-            const splitWeekIndex = weeks.findIndex(hasSplitWeek);
-
-            if (!preSelectedDateString && splitWeekIndex > -1) {
-                // a preSelectedDateString precludes split week logic
-                const week1 = [];
-                const week2 = [];
-                let switchToWeek2 = false;
-
-                for (let j = 0; j < 7; j++) {
-                    const newDate = new Date(weeks[splitWeekIndex].weekStartDate);
-                    newDate.setDate(newDate.getDate() + j);
-                    if (newDate.getDate() === 1) switchToWeek2 = true;
-                    if (switchToWeek2) {
-                        week2.push(newDate);
-                    } else {
-                        week1.push(newDate);
-                    }
-                }
-
-                const week1EndDate = week1[week1.length - 1];
-                const week2StartDate = week2[0];
-
-                if (week1EndDate < today) {
-                    // replace week 1 with week 2
-                    weeks[splitWeekIndex].weekStartDate = week2StartDate;
-                } else {
-                    const newWeek = {
-                        weekNum: weeks[splitWeekIndex].weekNum,
-                        weekStartDate: week2StartDate,
-                        weekEndDate: weeks[splitWeekIndex].weekEndDate,
-                    };
-                    weeks[splitWeekIndex].weekEndDate = week1EndDate;
-                    weeks.splice(splitWeekIndex + 1, 0, newWeek);
-                    weeks.pop();
-                    weeks.forEach((item, index) => {
-                        if (index > splitWeekIndex) {
-                            item.weekNum = item.weekNum + 1;
                         }
+                    }
+                    weeks.push({
+                        weekNum: i + 1,
+                        weekStartDate: weekStartDate,
+                        weekEndDate: weekEndDate,
                     });
+                    i++;
+                }
+            } else {
+                for (let i = 0; i < initialViewRowsToShow; i++) {
+                    if (i > 0) {
+                        weekStartDate = this.getNextWeekSunday(weekEndDate);
+                        weekEndDate = this.getWeekEndDate(weekStartDate);
+                    }
+                    weeks.push({
+                        weekNum: i + 1,
+                        weekStartDate: weekStartDate,
+                        weekEndDate: weekEndDate,
+                    });
+                }
+                // If any of these weeks is split between two months, then make them 2 separate "weeks"
+                // (a week split between two months is considered 2 weeks per business requirements)
+                const hasSplitWeek = (week) => {
+                    return week.weekStartDate.split("-")[1] !== week.weekEndDate.split("-")[1]
+                        ? true
+                        : false;
+                };
+                const splitWeekIndex = weeks.findIndex(hasSplitWeek);
+
+                if (splitWeekIndex > -1) {
+                    const week1 = [];
+                    const week2 = [];
+                    let switchToWeek2 = false;
+
+                    for (let j = 0; j < 7; j++) {
+                        const newDate = convertDateStringToDate(
+                            weeks[splitWeekIndex].weekStartDate
+                        );
+                        newDate.setDate(newDate.getDate() + j);
+                        if (newDate.getDate() === 1) switchToWeek2 = true;
+                        if (switchToWeek2) {
+                            week2.push(convertDateToDateString(newDate));
+                        } else {
+                            week1.push(convertDateToDateString(newDate));
+                        }
+                    }
+
+                    const week1EndDate = week1[week1.length - 1];
+                    const week2StartDate = week2[0];
+
+                    if (week1EndDate < todayString) {
+                        // replace week 1 with week 2
+                        weeks[splitWeekIndex].weekStartDate = week2StartDate;
+                    } else {
+                        const newWeek = {
+                            weekNum: weeks[splitWeekIndex].weekNum,
+                            weekStartDate: week2StartDate,
+                            weekEndDate: weeks[splitWeekIndex].weekEndDate,
+                        };
+                        weeks[splitWeekIndex].weekEndDate = week1EndDate;
+                        weeks.splice(splitWeekIndex + 1, 0, newWeek);
+                        weeks.pop();
+                        weeks.forEach((item, index) => {
+                            if (index > splitWeekIndex) {
+                                item.weekNum = item.weekNum + 1;
+                            }
+                        });
+                    }
                 }
             }
             return weeks;
         },
         async loadInitialData(config) {
-            let todayDate;
+            /*
-            if (this.today) {
+             ** NOTE: this _could_ be called by a parent before fully loaded, so data or computeds might not be available
-                todayDate = this.today;
+             */
-            } else if (config.todayOverrideDateString) {
+            let todayDateString;
-                todayDate = new Date(config.todayOverrideDateString + "T00:00:00");
-            } else {
-                todayDate = new Date();
-            }
-
-            const todayMonthIndex = todayDate.getMonth() + 1;
-            const todayYearNum = todayDate.getFullYear();
-            // TODO - set up currentMonthStart if direction is PAST:
-            // let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
-            const currentMonthEnd = new Date(todayYearNum, todayMonthIndex, 0);
-
             let calendarViewDirection = "none";
-            if (config.selectableDatesSetting === "past") calendarViewDirection = "past";
-            if (config.selectableDatesSetting === "custom") calendarViewDirection = "future";
-
-            const initialViewWeeks = this.getInitialViewWeeks(
-                todayDate,
-                config.initialViewRowsToShow,
-                config.preSelectedDate
-            );
-            const initialViewStartDate = todayDate;
-            const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
-            const firstSaturdayMonth = initialViewWeeks[0].weekEndDate.getMonth();
-            const lastSundayMonth =
-                initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.getMonth();
             let hideSomeDaysForInitialView = false;
             let hideSecondMonth = false;
 
-            // TODO - NEED TO CREATE OPPOSITE LOGIC FOR "past" DIRECTION LIKE BELOW v v v
+            if (this.todayString) {
-            if (calendarViewDirection === "future" && !config.preSelectedDate) {
+                todayDateString = this.todayString;
-                if (firstSaturdayMonth !== lastSundayMonth) {
+            } else if (config.todayOverrideDateString) {
-                    hideSomeDaysForInitialView = true;
+                todayDateString = config.todayOverrideDateString;
-                }
+            } else {
-                if (initialViewStartDate.getMonth() === lastSundayMonth) {
+                todayDateString = convertDateToDateString(new Date());
-                    hideSecondMonth = true;
+            }
-                    if (currentMonthEnd > initialViewEndDate) {
+            if (config.selectableDatesSetting === "past") calendarViewDirection = "past";
-                        // should part of 1st month be hidden?
+            if (config.selectableDatesSetting === "custom") calendarViewDirection = "future";
+
+            const currentMonthEnd = this.getMonthEnd(todayDateString);
+            // TODO - set up currentMonthStart if direction is PAST:
+            // let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
+            const initialViewWeeks = this.getInitialViewWeeks(
+                todayDateString,
+                config.initialViewRowsToShow,
+                config.preSelectedDate
+            );
+            const initialViewStartDate = todayDateString;
+            const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
+
+            if (!config.preSelectedDate) {
+                const firstSaturdayMonth = initialViewWeeks[0].weekEndDate.split("-")[1];
+                const lastSundayMonth =
+                    initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.split("-")[1];
+
+                if (calendarViewDirection === "future") {
+                    if (firstSaturdayMonth !== lastSundayMonth) {
                         hideSomeDaysForInitialView = true;
                     }
+                    if (initialViewStartDate.split("-")[1] === lastSundayMonth) {
+                        hideSecondMonth = true;
+                        if (currentMonthEnd > initialViewEndDate) {
+                            // should part of 1st month be hidden?
+                            hideSomeDaysForInitialView = true;
+                        }
+                    }
                 }
+                // TODO - NEED TO CREATE OPPOSITE LOGIC FOR "past" DIRECTION LIKE THE ABOVE ^ ^ ^
             }
 
             const loadInitialDataPromise = new Promise((resolve, reject) => {
                 const response = config.customSelectableDatesCallback(
-                    initialViewStartDate.toISOString().split("T")[0],
+                    initialViewStartDate,
-                    initialViewEndDate.toISOString().split("T")[0],
+                    initialViewEndDate,
                     store.getters.order.serviceLocation.appointmentType,
                     store.getters.order.serviceLocation.provider.providerNumber
                 );
@@ -313,7 +341,7 @@ export default {
 
             return loadInitialDataPromise.then((response) => {
                 const initialData = {
-                    todayDate: todayDate,
+                    todayDate: todayDateString,
                     initialViewStartDate: initialViewStartDate,
                     initialViewEndDate: initialViewEndDate,
                     calendarViewDirection: calendarViewDirection,
@@ -329,7 +357,7 @@ export default {
             this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
             const hideSecondMonth = config.hideSecondMonth;
             const direction = config.calendarViewDirection;
-            const monthsAfterToLoadOffset = 12;
+            const monthsAfterToLoadOffset = 6;
             const monthsBeforeToLoadOffset = 36;
             config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
                 this.selectableDatesData.push(selectableDate);
@@ -371,6 +399,13 @@ export default {
                     const monthToShow = this.months.find((month) =>
                         month.monthClass.includes("month-preselected")
                     );
+                    if (
+                        monthToShow.monthClass.includes("month-preselected") &&
+                        monthToShow.monthClass.includes("last-available-month")
+                    ) {
+                        // disable View More dates button if the preSelectedDate in the last available month
+                        this.disableViewMoreDatesButton = true;
+                    }
                     this.scrollToElement(monthToShow.monthString);
                 });
             }
@@ -390,32 +425,37 @@ export default {
                     this.hideSomeDaysForInitialView (string)
             */
 
-            let monthIndex = this.todayMonthIndex + offset; // mutable
+            let monthNum = convertDateStringToDate(this.todayString).getMonth() + offset + 1;
-            let yearNum = this.todayYearNum; // mutable
+            let yearNum = convertDateStringToDate(this.todayString).getFullYear();
             const calendarViewDirection = options.calendarViewDirection;
-            const initialViewStartDate = options.initialViewStartDate;
-            const initialViewEndDate = options.initialViewEndDate;
-            const hideSecondMonth = options.hideSecondMonth;
-            const preSelectedDateObj = options.preSelectedDate
-                ? new Date(options.preSelectedDate + "T00:00:00")
-                : null;
-            const dates = [];
-            let monthClass = "";
-            let isMonthThatHidesSomeDaysForInitialView;
-
             if (calendarViewDirection === "future" && offset > 0) {
-                while (monthIndex > 12) {
+                while (monthNum > 12) {
-                    monthIndex = monthIndex - 12;
+                    monthNum = monthNum - 12;
                     yearNum++;
                 }
             } else if (calendarViewDirection === "past" && offset < 0) {
-                while (monthIndex < 1) {
+                while (monthNum < 1) {
-                    monthIndex = 12 + monthIndex;
+                    monthNum = 12 + monthNum;
                     yearNum--;
                 }
             }
+            const initialViewEndDate = options.initialViewEndDate;
+            // const initialViewStartDate = options.initialViewStartDate; // TODO: to be used for past calendarViewDirection
+            const hideSecondMonth = options.hideSecondMonth;
+            const preSelectedDateObj = options.preSelectedDate
+                ? convertDateStringToDate(options.preSelectedDate)
+                : null;
+            const dates = [];
+            const monthEndDate = new Date(yearNum, monthNum, 0);
+            const monthStartDateNum =
+                offset === 0 && calendarViewDirection === "future"
+                    ? this.currentWeekStartDateNum
+                    : 1;
+            const monthStartDate = new Date(yearNum, monthNum - 1, monthStartDateNum);
+            const startDateDayIndex = monthStartDate.getDay();
 
-            const monthEndDate = new Date(yearNum, monthIndex, 0);
+            let monthClass = "";
+            let isMonthThatHidesSomeDaysForInitialView;
             let monthEndDateNum = monthEndDate.getDate();
 
             if (
@@ -426,16 +466,7 @@ export default {
                 monthEndDateNum = this.currentWeekEndDateNum;
             }
 
-            const monthStartDateNum =
+            if (options.preSelectedDate) {
-                offset === 0 && calendarViewDirection === "future"
-                    ? this.currentWeekStartDateNum
-                    : 1;
-            const monthStartDate = new Date(yearNum, monthIndex - 1, monthStartDateNum);
-
-            const startDateDayIndex = monthStartDate.getDay();
-            const endDateDayIndex = monthEndDate.getDay();
-
-            if (preSelectedDateObj) {
                 if (
                     monthStartDate.getFullYear() === preSelectedDateObj.getFullYear() &&
                     monthStartDate.getMonth() === preSelectedDateObj.getMonth()
@@ -472,9 +503,9 @@ export default {
                 const dateString =
                     yearNum.toString() +
                     "-" +
-                    forceTwoDigitString(monthIndex) +
+                    ('0'+ monthNum).slice(-2) +
                     "-" +
-                    forceTwoDigitString(i);
+                    ('0'+ i).slice(-2);
 
                 if (offset === 0 && i === this.todayDateNum) {
                     dayClasses += "current-day";
@@ -487,8 +518,8 @@ export default {
                 }
                 if (
                     this.hideSomeDaysForInitialView &&
-                    initialViewEndDate.getMonth() + 1 === monthIndex &&
+                    convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum &&
-                    initialViewEndDate.getDate() < i
+                    convertDateStringToDate(initialViewEndDate).getDate() < i
                 ) {
                     dayClasses += "day-hidden";
                     isMonthThatHidesSomeDaysForInitialView = true;
@@ -506,9 +537,9 @@ export default {
             }
 
             const monthToAdd = {
-                monthLabel: MONTHS_OF_YEAR[monthIndex - 1],
+                monthLabel: MONTHS_OF_YEAR[monthNum - 1],
-                monthIndex: monthIndex,
+                monthIndex: monthNum,
-                monthString: MONTHS_OF_YEAR[monthIndex - 1] + "-" + yearNum?.toString(),
+                monthString: MONTHS_OF_YEAR[monthNum - 1] + "-" + yearNum?.toString(),
                 yearNum: yearNum,
                 dates: dates,
                 startDateDayIndex: startDateDayIndex,
@@ -840,12 +871,15 @@ export default {
             }
             &.current-day {
                 label {
+                    font-weight: 700;
+                    color: $black;
+
                     &:after {
                         content: "";
                         width: 0.25rem;
                         height: 0.25rem;
                         border-radius: 50%;
-                        background-color: $blue;
+                        background-color: $black;
                         position: absolute;
                         top: 28px;
                     }

src/digital-components/date-picker/mixins/helpers.js

@@ -7,9 +7,4 @@ const requiredParameter = () => {
     throw new Error("parameter is required");
 };
 
-const forceTwoDigitString = (monthNum) => {
+export { selectableDaysOptions, requiredParameter };
-    const newString = monthNum.toString();
-    return newString.length === 1 ? "0" + newString : newString;
-};
-
-export { selectableDaysOptions, requiredParameter, forceTwoDigitString };

src/layouts/schedule/helpers/schedule-helper.js

@@ -18,3 +18,30 @@ export function calcDaysBetweenDates(dateString1, dateString2) {
     const timeDifference = Math.abs(date2 - date1); // Calculate the time difference in milliseconds
     return Math.ceil(timeDifference / (1000 * 60 * 60 * 24)); // Convert milliseconds to days
 }
+
+export function convertDateToDateString(date) {
+    // returns YYYY-MM-DD format
+    if (date instanceof Date !== true) return;
+    return (
+        date.getFullYear() +
+        "-" +
+        ("0" + (date.getMonth() + 1)).slice(-2) +
+        "-" +
+        ("0" + date.getDate()).slice(-2)
+    );
+}
+
+export function convertDateStringToDate(dateString) {
+    // dateString must be YYYY-MM-DD format
+    if (typeof dateString !== "string") return;
+    const dateParts = dateString.split("-");
+    return new Date(dateParts[0], parseInt(dateParts[1]) - 1, dateParts[2]);
+}
+
+export function sumDateString(dateString, daysToAdd) {
+    // dateString must be YYYY-MM-DD format
+    if (typeof dateString !== "string") return;
+    const date = convertDateStringToDate(dateString);
+    date.setDate(date.getDate() + daysToAdd);
+    return convertDateToDateString(date);
+}

src/layouts/schedule/schedule.vue

@@ -64,7 +64,11 @@ import { storeActions } from "@/constants/store-actions";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
-import { calcDaysBetweenDates } from "@/layouts/schedule/helpers/schedule-helper";
+import {
+    calcDaysBetweenDates,
+    convertDateStringToDate,
+    sumDateString,
+} from "@/layouts/schedule/helpers/schedule-helper";
 import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
 import { errorMessages } from "@/constants/error-messages";
 import { required } from "@/helpers/validation-rules";
@@ -82,46 +86,41 @@ const getAvailableDates = async (
     appointmentType,
     providerNumber
 ) => {
-    const apiEndDateLimit = new Date(startDateString + "T00:00:00");
+    const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
-    const endDate = new Date(endDateString + "T00:00:00");
-    apiEndDateLimit.setDate(apiEndDateLimit.getDate() + TIME_SLOTS_CALL_DAYS_LIMIT);
-
-    // how many days are between startDate and endDate?
     const difference = calcDaysBetweenDates(startDateString, endDateString);
     const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
     const storeActionConfigs = [];
     const timeSlotsData = {};
-    let apiStartDate = new Date(startDateString + "T00:00:00");
-    let apiEndDate = apiEndDateLimit;
     timeSlotsData.days = [];
+    let apiStartDate = startDateString;
+    let apiEndDate = apiEndDateLimit;
 
     for (let i = 1; i <= apiCallsCount; i++) {
         let storeActionConfig;
 
         if (i > 1) {
-            apiStartDate = new Date(apiEndDate);
+            apiStartDate = sumDateString(apiEndDate, 1);
-            apiStartDate.setDate(apiStartDate.getDate() + 1);
+            apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
-            apiEndDate = new Date(apiStartDate);
+
-            apiEndDate.setDate(apiEndDate.getDate() + TIME_SLOTS_CALL_DAYS_LIMIT);
+            if (i === apiCallsCount) {
-        }
+                apiEndDate = endDateString;
-        if (i === apiCallsCount) {
+            }
-            apiEndDate = new Date(endDateString + "T00:00:00");
         }
 
         if (appointmentType === AppointmentTypeStrings.MOBILE) {
             storeActionConfig = {
                 storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
                 payload: {
-                    startDate: apiStartDate.toISOString().split("T")[0],
+                    startDate: apiStartDate,
-                    endDate: apiEndDate.toISOString().split("T")[0],
+                    endDate: apiEndDate,
                 },
             };
         } else {
             storeActionConfig = {
                 storeAction: storeActions.GET_SHOP_TIME_SLOTS,
                 payload: {
-                    startDate: apiStartDate.toISOString().split("T")[0],
+                    startDate: apiStartDate,
-                    endDate: apiEndDate.toISOString().split("T")[0],
+                    endDate: apiEndDate,
                     shopAppointmentType: appointmentType,
                     providerNumber: providerNumber,
                 },
@@ -382,12 +381,11 @@ export default {
                         );
                 }
             }
-
             this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText);
         },
         convertSelectedDateToShortMonthAndDay(selectedDate) {
             // This conversion ensures we don't get get GMT induced date changes
-            const dateObject = new Date(`${selectedDate}T00:00:00`);
+            const dateObject = convertDateStringToDate(selectedDate);
             // Ex: April 25
             return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
         },

src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue

@@ -41,6 +41,7 @@
 import modal from "@/digital-components/modal/modal";
 import textBlock from "@/digital-components/text-block/text-block";
 import buttonQuestion from "@/digital-components/button-question/button-question";
+import { convertDateStringToDate } from "@/layouts/schedule/helpers/schedule-helper";
 import timeSlotModalListButton from "./time-slot-modal-list-button/time-slot-modal-list-button";
 
 // TODO: Move this somewhere more global
@@ -257,7 +258,7 @@ export default {
             }
 
             // This conversion ensures we don't get get GMT induced date changes
-            const dateObject = new Date(`${this.dateAndTimeSlotData.date}T00:00:00`);
+            const dateObject = convertDateStringToDate(this.dateAndTimeSlotData.date);
             // Ex: Tuesday, April 22
             return dateObject.toLocaleDateString("en-us", {
                 weekday: "long",