Need Help Making JQuery Date Picker a Required Field on a Product Page

190 Views Asked by At

I'm creating a shopify website. On a product page I've added a date picker for cake reservations. As I have it setup right now, the person can add the cake to their cart without entering a pick-up date, which is not helpful.

How can I make this a required field so that they must select a pick-up date in order to add it to the cart?

Insight would be greatly appreciated!!

{% if product.title contains 'Cake' %}
{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>
 
    <div style="width:300px; clear:both;">
    <p>
      <label for="date">PICK-UP DATE:</label>
      <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
      <span style="display:block" class="instructions">48-hour Notice for Cake Orders </span>
    </p>
  </div>


  <script>
    window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
            minDate: +2, 
            maxDate: '+2M',
           
            
          });
        });
      }
    }
  </script>
{% endif %}
0

There are 0 best solutions below