fix(storefront): BCTHEME-1897 Date Field Modifier - February showing …

…30th and 31st (#2473) Co-authored-by: Vlad Dlogush <[email protected]>
bigcommerce · Jul 31, 2024 · 97a7605 · 97a7605
1 parent 8090f58
commit 97a7605
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Date Field Modifier - February showing 30th and 31st [#2473](https://github.com/bigcommerce/cornerstone/pull/2473)
 - Adding mobile nav dropdown focusTrap [#2465](https://github.com/bigcommerce/cornerstone/pull/2465)
 - Remove remote_api_scripts to avoid double firing Meta Pixel analytics [#2467](https://github.com/bigcommerce/cornerstone/pull/2467)
 - Prevent flow outside page container on account pages [#2462](https://github.com/bigcommerce/cornerstone/pull/2462)

diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
@@ -25,6 +25,7 @@ export default class ProductDetails extends ProductDetailsBase {
         this.swatchInitMessageStorage = {};
         this.swatchGroupIdList = $('[id^="swatchGroup"]').map((_, group) => $(group).attr('id'));
         this.storeInitMessagesForSwatches();
+        this.updateDateSelector();
 
         const $form = $('form[data-cart-item-add]', $scope);
 
@@ -591,4 +592,41 @@ export default class ProductDetails extends ProductDetailsBase {
             detail: { productDetails },
         }));
     }
+
+    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);
+                let daysInMonth;
+
+                if (!Number.isNaN(month) && !Number.isNaN(year)) {
+                    switch (month) {
+                    case 2:
+                        daysInMonth = (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0) ? 29 : 28;
+                        break;
+                    case 4: case 6: case 9: case 11:
+                        daysInMonth = 30;
+                        break;
+                    default:
+                        daysInMonth = 31;
+                    }
+
+                    daySelector.empty();
+
+                    for (let i = 1; i <= daysInMonth; i++) {
+                        daySelector.append($('<option></option>').val(i).text(i));
+                    }
+                }
+            };
+
+            monthSelector.on('change', updateDays);
+            yearSelector.on('change', updateDays);
+            updateDays();
+        });
+    }
 }
diff --git a/templates/components/products/options/date.html b/templates/components/products/options/date.html
@@ -4,7 +4,18 @@
 
         {{> components/common/requireness-msg}}
     </label>
-    <select class="form-select form-select--date" name="attribute[{{this.id}}][month]" {{#if required}}required{{/if}}>
+    <select class="form-select form-select--date" name="attribute[{{this.id}}][year]" id="year-selector" {{#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}}>
+                {{$index}}
+            </option>
+        {{/for}}
+        {{#if earliest_year '==' latest_year}}
+        <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}}>
         <option value="">{{lang 'common.month'}}</option>
         {{#for 1 12}}
             <option value="{{$index}}" {{#if ../selected_date.month '==' $index}}selected="selected"{{/if}}>
@@ -14,21 +25,12 @@
     </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}}
-    </select>
-    <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}}>
-                {{$index}}
-            </option>
-        {{/for}}
-        {{#if earliest_year '==' latest_year}}
-        <option value="{{earliest_year}}" selected="selected">{{earliest_year}}</option>
-        {{/if}}
+        </optgroup>
     </select>
 </div>