Make Date Picker required (yes, another one!)

Chris_Luke
Excursionist
21 0 4

Hello, I'm new to Shopify, but have experience with Wordpress, PHP, etc.

I have a very bare store, trying to see if Shopify can do what I need it to, especially with the recent POS feature.

I have successfully added a Date Picker, set the minimum date selection and also blocked out all Tuesdays so I got that part!

I have read pretty much every single thread here and googled a bunch about the jQuery Validation Plugin to make the Date Picker a required entry on my cart page. But I can't get it to work.  

Here is everything I've added for the date picker, titled delivery-date.liquid:

{{ 'http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'; | stylesheet_tag }}
{{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' | script_tag }}

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Choose a pickup/ship date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions">Orders must be placed at least<br />2 days before pickup/shipping.</span>
  </p>
</div>

<script>
jQuery(function() {
  jQuery("#date").datepicker( { 
    minDate: +2, 
    maxDate: "+1M",
    beforeShowDay: function(day) {
            var day = day.getDay();
            if (day == 2) {
                return [false, ""]
            } else {
                return [true, ""]
            }
         }
  } );
});
</script>

Now for the validation thing, I uploaded jquery.validate.min.js to the Assets section.

Then I added this to the bottom of my theme.liquid before the body close tag:

{{ 'jquery.validate.min.js' | asset_url | script_tag }}

<script type="text/javascript">
    $("form").validate();
</script>

Now I'm guessing "form" needs to be changed to something to do with that date picker from above.  I've tried "date" ".date" and "#date" (obviously shooting in the dark) but nothing works (I completed the step described immediately below in all permutations and nothing works).

I also added the word "required" in a few ways to the following part of the date picker code from above:

original:

 <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />

different ways to add required, all from different threads here and online:

 <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" required />
 <input required id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" required />
 <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" class="required" />

No idea.

This probably has nothing to do with it, but the jquery.validate.min.js asset I uploaded was all in one line, not formatted with line breaks like i usually see, but that was downloaded directly from http://bassistance.de/jquery-plugins/jquery-plugin-validation/ (what is the difference between the .min version and the one without .min?).

Any help would be appreciated.  Most of the replies I saw were "use this validation plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/";, without any further instruction. I really don't understand how to implement it into Shopify, so if anyone can spell it out, that'd be great!

Here are the links I've viewed previously:

https://ecommerce.shopify.com/c/ecommerce-design/t/required-fields-on-checkout-47410

https://ecommerce.shopify.com/c/ecommerce-design/t/jquery-validation-164814

http://support.shopifyconcierge.com/entries/21841883-Making-Booking-Date-a-Required-Field

https://ecommerce.shopify.com/c/ecommerce-design/t/jquery-datepicker-required-format-76945

https://ecommerce.shopify.com/c/shopify-discussion/t/validate-form-on-submit-112254

Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Hey Chris,

Throw away the validation plugin, and use this:

<script>
$(function() {
  $('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
    if ($('#date').val() == '') {
      alert("You must pick a delivery date");   
      return false; 
    }
    else {
      $(this).submit();
    }
  });
});
</script>

Add that to your snippet or the cart.liquid template.

Let me know how that goes!

0 Likes
Chris_Luke
Excursionist
21 0 4

thank you very much for that suggestion.  i tried it and i do get a pop-up saying Date is required, but after clicking OK, it simply moves on to the final checkout page. :)

any ideas on that or other methods?

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Oh silly me, I forgot the return false.

Try this:

script>
$(function() {
  $('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
    if ($('#date').val() == '') {
      alert("You must pick a delivery date"); 
      return false;
    }
    else {
      $(this).submit();
    }
  });
});
</script>

 

Chris_Luke
Excursionist
21 0 4

that did it! :) thanks a bunch. 

i really like the pop-up dialog, as it's really clear.

if anyone can comment on the other method though, i'd love to know what i did wrong there.  

0 Likes
Emily_Cofrances
New Member
2 0 0

Thank you kindly!

0 Likes
Massilia
Shopify Partner
1 0 0

Hello,

I tried to add the script to have the date picker required on the bottom of my delivery-date snippet but it doesn't work.

I tried the same thing at the bottom of my cart.liquid template.

Should I put the script to a specific place and not the bottom?

Also is someone already tried a date and time picker? I would love to have this feature.

Thank you!

0 Likes
BlinkSun
New Member
1 0 0

2020 now and this thread help me !

0 Likes
DonSanchez29
New Member
1 0 0

Tried using this but it doesnt work on my site. Im using debut theme. Can anyone help me? Thank you

0 Likes
Badbaker
New Member
1 0 0

Could you please tell where exactly should I insert this? At the very end of delivery-date.liquid or instead of something... or inbetween?

0 Likes