fix(storefront): SD-10928 remove space at top of date field and suppo…

…rt multiple date fields fix(storefront): SD-10928 remove space at top of date field and support multiple date fields
bigcommerce · Jan 16, 2025 · 3e6ff1d · 3e6ff1d
1 parent c5872a2
commit 3e6ff1d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Use fetch when updating variants in cart [#2521](https://github.com/bigcommerce/cornerstone/pull/2521)
 - Add a region to display the payment promotion widget on the category pages [#2530](https://github.com/bigcommerce/cornerstone/pull/2530)
 - Rename the region to display the payment promotion widget on the category pages [#2531](https://github.com/bigcommerce/cornerstone/pull/2531)
+- Cornerstone update to support multiple date fields and remove blank space [#2533](https://github.com/bigcommerce/cornerstone/pull/2533)
 
 ## 6.15.0 (10-18-2024)
 - Cornerstone changes to support inc/ex tax price lists on PDP [#2486](https://github.com/bigcommerce/cornerstone/pull/2486)

diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
@@ -594,14 +594,13 @@ export default class ProductDetails extends ProductDetailsBase {
     }
 
     updateDateSelector() {
-        $(document).ready(() => {
-            const monthSelector = $('#month-selector');
-            const daySelector = $('#day-selector');
-            const yearSelector = $('#year-selector');
-
-            const updateDays = () => {
-                const month = parseInt(monthSelector.val(), 10);
-                const year = parseInt(yearSelector.val(), 10);
+        this.$scope.each((i, scope) => {
+            function updateDays(dateOption) {
+                const monthSelector = dateOption.querySelector('select[name$="[month]"]');
+                const daySelector = dateOption.querySelector('select[name$="[day]"]');
+                const yearSelector = dateOption.querySelector('select[name$="[year]"]');
+                const month = parseInt(monthSelector.value, 10);
+                const year = parseInt(yearSelector.value, 10);
                 let daysInMonth;
 
                 if (!Number.isNaN(month) && !Number.isNaN(year)) {
@@ -616,17 +615,28 @@ export default class ProductDetails extends ProductDetailsBase {
                         daysInMonth = 31;
                     }
 
-                    daySelector.empty();
-
-                    for (let i = 1; i <= daysInMonth; i++) {
-                        daySelector.append($('<option></option>').val(i).text(i));
+                    for (let day = 29; day <= 31; day++) {
+                        const option = daySelector.querySelector(`option[value="${day}"]`);
+                        if (day <= daysInMonth && !option) {
+                            daySelector.options.add(new Option(day, day));
+                        } else if (day > daysInMonth && option) {
+                            option.remove();
+                        }
                     }
                 }
-            };
+            }
+
+            $(scope).on('change', (e) => {
+                const dateOption = e.target && e.target.closest && e.target.closest('[data-product-attribute=date]');
 
-            monthSelector.on('change', updateDays);
-            yearSelector.on('change', updateDays);
-            updateDays();
+                if (dateOption) {
+                    updateDays(dateOption);
+                }
+            });
+
+            scope.querySelectorAll('[data-product-attribute=date]').forEach(dateOption => {
+                updateDays(dateOption);
+            });
         });
     }
 }
diff --git a/templates/components/products/options/date.html b/templates/components/products/options/date.html
@@ -4,7 +4,7 @@
 
         {{> components/common/requireness-msg}}
     </label>
-    <select class="form-select form-select--date" name="attribute[{{this.id}}][year]" id="year-selector" {{#if required}}required{{/if}}>
+    <select class="form-select form-select--date" name="attribute[{{this.id}}][year]" {{#if required}}required{{/if}}>
         <option value="">{{lang 'common.year'}}</option>
         {{#for earliest_year latest_year}}
             <option value="{{$index}}" {{#if ../selected_date.year '==' $index}}selected="selected"{{/if}}>
@@ -15,7 +15,7 @@
         <option value="{{earliest_year}}" selected="selected">{{earliest_year}}</option>
         {{/if}}
     </select>
-    <select class="form-select form-select--date" name="attribute[{{this.id}}][month]" id="month-selector" {{#if required}}required{{/if}}>
+    <select class="form-select form-select--date" name="attribute[{{this.id}}][month]" {{#if required}}required{{/if}}>
         <option value="">{{lang 'common.month'}}</option>
         {{#for 1 12}}
             <option value="{{$index}}" {{#if ../selected_date.month '==' $index}}selected="selected"{{/if}}>
@@ -25,12 +25,10 @@
     </select>
     <select class="form-select form-select--date" name="attribute[{{this.id}}][day]" {{#if required}}required{{/if}}>
         <option value="">{{lang 'common.day'}}</option>
-        <optgroup id="day-selector">
         {{#for 1 31}}
             <option value="{{$index}}" {{#if ../selected_date.day '==' $index}}selected="selected"{{/if}}>
                 {{$index}}
             </option>
         {{/for}}
-        </optgroup>
     </select>
 </div>