Hi,
I hope someone can help me.
Using the MINIMAL theme...
We fulfil customer orders on the date they choose, we restrict the dates to exclude Sundays, public holidays etc
To gather their required delivery date I use datepicker and an input field (shown below):
<h3>Choose your Delivery / Collection date</h3>
<div>
<input required class="required" type='text' id='DelPickupDate' name="attributes[DelPickupDate]" value="{{ cart.attributes["DelPickupDate"] }}" placeholder='select a date' />
</div>
This works most of the time, however some customers have worked out they can just type a date in the field and this is generating orders we can't fulfil.
I have tried to block this using:
<h3>Choose your Delivery / Collection date</h3>
<div>
<input readonly="readonly" required class="required" type='text' id='DelPickupDate' name="attributes[DelPickupDate]" value="{{ cart.attributes["DelPickupDate"] }}" placeholder='select a date' />
</div>
BUT this is creating a new problem. When I use this code it does stop customers typing dates in HOWEVER now the 'required' validation no longer works and the cart page allows customer to move onto to checkout without entering any date - this is even worse for us.
Does anyone know how to block typed entry into my input field whilst also ensuring a date is selected before moving onto the checkout page?
Thankyou
Andy
Sorry for facing this issue, it's my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Hi, sorry just catching up after a busy week selling
we are at
https://didicakesbath.com/cart
thanks
Andrew
its work
You could leave it as it is, and make read only with javascript. You can say, whenever someone clicks into the input field, to blur it, which essentially takes focus off of it. You can put this in your theme's JS file, or put it in <script> tags in theme.liquid right before the closing </body> tag:
let dateInput = document.getElementById('DelPickupDate');
dateInput.addEventListener('focus', function(){
this.blur()
});
// or in theme.liquid
<script>
let dateInput = document.getElementById('DelPickupDate');
dateInput.addEventListener('focus', function(){
this.blur()
});
</script>
This way they won't be able to change the text field. I checked and it doesnt affect the date picker functionality
User | Count |
---|---|
445 | |
207 | |
104 | |
88 | |
87 |