diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 786e3a851..6f7039e44 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -498,15 +498,6 @@ export default {
         const shopProviderData = await getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode);
         const providerNumber = shopProviderData?.data?.shopProviders[0]?.providerNumber;
 
-        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
-            // setup config options for date-picker
-            selectableDatesSetting: "custom",
-            initialViewRowsToShow: NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW,
-            getSelectableDatesCallback: getScheduleApiResponse,
-            preSelectedDate: preSelectedDate,
-            providerNumber: providerNumber,
-        });
-
         // Get pricingByDayUpcharge needed for Pricing By Day
         const pricingByDayUpchargePartPromise = showPricingByDay
             ? getPricingByDayPartWithPrice()
@@ -542,10 +533,6 @@ export default {
                 resultKey: "alertReasons",
                 promise: alertReasonsPromise,
             },
-            {
-                resultKey: "datePickerInitialData",
-                promise: datePickerInitialDataPromise,
-            },
             {
                 resultKey: "pricingByDayUpchargePart",
                 promise: pricingByDayUpchargePartPromise,
@@ -579,19 +566,10 @@ export default {
                   )
                 : null;
 
-        const datePickerInitialData = resultMap.datePickerInitialData;
-        datePickerInitialData.pricingByDayBasePrice = pricingByDayBasePrice;
-        datePickerInitialData.pricingByDayUpcharge = pricingByDayUpcharge;
-
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.datePicker.initializeComponent(datePickerInitialData);
             vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
-            vm.selectableDatesInshop =
-                datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
-            vm.selectableDatesMobile =
-                datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
             vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
                 ? resultMap.premiumFeeWithPrice[0]
                 : null;
@@ -614,6 +592,24 @@ export default {
         });
     },
     mounted() {
+    async mounted() {
+        const datePickerInitialData = await datePicker.methods.loadInitialData({
+            // setup config options for date-picker
+            selectableDatesSetting: "custom",
+            initialViewRowsToShow: NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW,
+            getSelectableDatesCallback: getScheduleApiResponse,
+            // preSelectedDate: preSelectedDate,
+            providerNumber: this.selectedProvider?.providerNumber,
+            zipCode: this.zipCode,
+        });
+        datePickerInitialData.pricingByDayBasePrice = this.pricingByDayBasePrice;
+        datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge;
+        this.$refs.datePicker.initializeComponent(datePickerInitialData);
+        this.selectableDatesInshop =
+            datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
+        this.selectableDatesMobile =
+            datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
+
         this.$nextTick(() => {
             if (!this.selectedDate) {
                 // if no date is preselected on load, then select the first available