Created
April 15, 2026 11:00
-
-
Save pramodjodhani/a17a14830c19131fb8ebb88b22ba8b16 to your computer and use it in GitHub Desktop.
Orderable - by default set the date field to "Select a date.."
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // Orderable - by default set the date field to "Select a date.." | |
| add_action( 'wp_footer', function() { | |
| ?> | |
| <script> | |
| (function() { | |
| let hasCleared = false; | |
| let observer = null; | |
| let userPickedDate = false; | |
| function forceSelectDatePlaceholder() { | |
| if (hasCleared) return; | |
| const select = document.getElementById('orderable-date'); | |
| if (!select) return; | |
| if (select.value !== '') { | |
| select.value = ''; | |
| // Mark the event as a forced clear so the change listener ignores it | |
| const event = new Event('change', { bubbles: true }); | |
| event._isForcedClear = true; | |
| select.dispatchEvent(event); | |
| hasCleared = true; | |
| if (observer) { | |
| observer.disconnect(); | |
| observer = null; | |
| } | |
| } | |
| } | |
| function startObserver() { | |
| if (observer) { | |
| observer.disconnect(); | |
| observer = null; | |
| } | |
| hasCleared = false; | |
| observer = new MutationObserver(() => { | |
| if (!hasCleared) { | |
| forceSelectDatePlaceholder(); | |
| } | |
| }); | |
| observer.observe(document.body, { | |
| childList: true, | |
| subtree: true | |
| }); | |
| setTimeout(() => { | |
| if (!hasCleared && observer) { | |
| observer.disconnect(); | |
| observer = null; | |
| } | |
| }, 3000); | |
| } | |
| // Only set userPickedDate if the change was made by the user, not by forceSelectDatePlaceholder | |
| document.addEventListener('change', function(e) { | |
| if (e.target.id === 'orderable-date' && !e._isForcedClear) { | |
| userPickedDate = true; | |
| } | |
| }); | |
| // On every updated_checkout, reset the date — unless the user manually picked one | |
| jQuery(document.body).on('updated_checkout', function() { | |
| if (!userPickedDate) { | |
| setTimeout(startObserver, 150); | |
| } | |
| }); | |
| // Initial run on page load | |
| startObserver(); | |
| window.addEventListener('load', function() { | |
| setTimeout(forceSelectDatePlaceholder, 300); | |
| }); | |
| })(); | |
| </script> | |
| <?php | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment