diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 6c6cd48a4..be38d0f0b 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/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() { - if (this.todayOverrideDateString) { - return new Date(this.todayOverrideDateString + "T00:00:00"); - } - return new Date(); - }, - todayMonthIndex() { - return this.today.getMonth() + 1; - }, - todayYearNum() { - return this.today.getFullYear(); + todayString() { + return this.todayOverrideDateString || convertDateToDateString(new Date()); }, 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); - let weekEndDate = this.getWeekEndDate(today); - 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 ( - 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; + if ( + (preSelectedDateMonthEnd > weekStartDate && + preSelectedDateMonthEnd < weekEndDate) || + preSelectedDateMonthEnd === weekStartDate || + preSelectedDateMonthEnd === weekEndDate + ) { + weekEndDate = preSelectedDateMonthEnd; + weekIncludesPreSelectedMonthEnd = true; } + } + 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) { - todayDate = this.today; - } else if (config.todayOverrideDateString) { - 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); - + /* + ** NOTE: this _could_ be called by a parent before fully loaded, so data or computeds might not be available + */ + let todayDateString; 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 (calendarViewDirection === "future" && !config.preSelectedDate) { - if (firstSaturdayMonth !== lastSundayMonth) { - hideSomeDaysForInitialView = true; - } - if (initialViewStartDate.getMonth() === lastSundayMonth) { - hideSecondMonth = true; - if (currentMonthEnd > initialViewEndDate) { - // should part of 1st month be hidden? + if (this.todayString) { + todayDateString = this.todayString; + } else if (config.todayOverrideDateString) { + todayDateString = config.todayOverrideDateString; + } else { + todayDateString = convertDateToDateString(new Date()); + } + if (config.selectableDatesSetting === "past") calendarViewDirection = "past"; + 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], - initialViewEndDate.toISOString().split("T")[0], + initialViewStartDate, + 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 yearNum = this.todayYearNum; // mutable + let monthNum = convertDateStringToDate(this.todayString).getMonth() + offset + 1; + 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) { - monthIndex = monthIndex - 12; + while (monthNum > 12) { + monthNum = monthNum - 12; yearNum++; } } else if (calendarViewDirection === "past" && offset < 0) { - while (monthIndex < 1) { - monthIndex = 12 + monthIndex; + while (monthNum < 1) { + 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 = - 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 (options.preSelectedDate) { 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 && - initialViewEndDate.getDate() < i + convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum && + convertDateStringToDate(initialViewEndDate).getDate() < i ) { dayClasses += "day-hidden"; isMonthThatHidesSomeDaysForInitialView = true; @@ -506,9 +537,9 @@ export default { } const monthToAdd = { - monthLabel: MONTHS_OF_YEAR[monthIndex - 1], - monthIndex: monthIndex, - monthString: MONTHS_OF_YEAR[monthIndex - 1] + "-" + yearNum?.toString(), + monthLabel: MONTHS_OF_YEAR[monthNum - 1], + monthIndex: monthNum, + 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; } diff --git a/src/digital-components/date-picker/mixins/helpers.js b/src/digital-components/date-picker/mixins/helpers.js index 6670bb60d..3141a7a68 100644 --- a/src/digital-components/date-picker/mixins/helpers.js +++ b/src/digital-components/date-picker/mixins/helpers.js @@ -7,9 +7,4 @@ const requiredParameter = () => { throw new Error("parameter is required"); }; -const forceTwoDigitString = (monthNum) => { - const newString = monthNum.toString(); - return newString.length === 1 ? "0" + newString : newString; -}; - -export { selectableDaysOptions, requiredParameter, forceTwoDigitString }; +export { selectableDaysOptions, requiredParameter }; diff --git a/src/layouts/schedule/helpers/schedule-helper.js b/src/layouts/schedule/helpers/schedule-helper.js index 6f8a09373..82c756b5b 100644 --- a/src/layouts/schedule/helpers/schedule-helper.js +++ b/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); +} diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index ea2ae4cfe..7c0f14659 100644 --- a/src/layouts/schedule/schedule.vue +++ b/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 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 apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT); 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.setDate(apiStartDate.getDate() + 1); - apiEndDate = new Date(apiStartDate); - apiEndDate.setDate(apiEndDate.getDate() + TIME_SLOTS_CALL_DAYS_LIMIT); - } - if (i === apiCallsCount) { - apiEndDate = new Date(endDateString + "T00:00:00"); + apiStartDate = sumDateString(apiEndDate, 1); + apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT); + + if (i === apiCallsCount) { + apiEndDate = endDateString; + } } if (appointmentType === AppointmentTypeStrings.MOBILE) { storeActionConfig = { storeAction: storeActions.GET_MOBILE_TIME_SLOTS, payload: { - startDate: apiStartDate.toISOString().split("T")[0], - endDate: apiEndDate.toISOString().split("T")[0], + startDate: apiStartDate, + endDate: apiEndDate, }, }; } else { storeActionConfig = { storeAction: storeActions.GET_SHOP_TIME_SLOTS, payload: { - startDate: apiStartDate.toISOString().split("T")[0], - endDate: apiEndDate.toISOString().split("T")[0], + startDate: apiStartDate, + 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" }); }, diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue index 59b1e2e42..eff2358f0 100644 --- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue +++ b/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",