Date Picker Problem- Calendar Not Showing

HF1
New Member
5 0 0

Hello,

I have tried searching on here for solutions to my problem but can't seem to find one that works or understand a few of the solutions.

Tried to add a date picker on my shopify card page via these instructions:

https://help.shopify.com/themes/customization/cart/add-date-picker-for-delivery-dates

My "delivery-date.liquid" has this code in it:

{{ '//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">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> Orders for the Auckland Metro area are deliverd on Tuesday & Thursday only.</span>
  </p>
</div>

<script>
jQuery(function() {
  jQuery("#date").datepicker( { 
    minDate: +1, 
    maxDate: '+2M',
    beforeShowDay: jQuery.datepicker.noWeekends
  } );
});
</script>

{% comment %}
  To remove days of the week that aren't Saturday and Sunday, use this:
  http://stackoverflow.com/questions/2968414/disable-specific-days-of-the-week-on-jquery-ui-datepicker
{% endcomment %}

My "cart.liquid" looks has this code in it:

{% assign has_sidebar = false %}
{% assign has_crumbs = true %}
{% assign page_title = 'cart.title' | t %}

{% include 'settings' %}
{% include 'page-header' with page_title %}
{% include 'content-wrap-open' %}
{% include 'content-open' %}

{% if cart.items == empty %}
  <p class="empty">{{ 'cart.empty_html' | t }}</p>
{% else %}

<form id="cartform" action="/cart" method="post">

  {% include 'line-items-cart' %}
<p class="cart-attribute__field">
  <label for="would-you-like-to-send-your-order-as-a-gift-enter-delivery-addressphone-number-special-instructions-any-message-you-would-like-put-on-the-gift-card"><h3>Would you like to send your order as a gift?  Enter delivery address, recipient phone number, special instructions & any message you would like put on the gift card below:<h/3></label>
  <textarea id="would-you-like-to-send-your-order-as-a-gift-enter-delivery-addressphone-number-special-instructions-any-message-you-would-like-put-on-the-gift-card" name="attributes[Would you like to send your order as a gift?  Enter delivery address,phone number, special instructions & any message you would like put on the gift card.]">{{ cart.attributes["Would you like to send your order as a gift?  Enter delivery address,phone number, special instructions & any message you would like put on the gift card."] }}</textarea>
    </p>
  <div class="row">
    <div class="large-7 columns">

      <div class="row">
        <div class="large-5 columns">
          {% include 'shipping-calculator' %}
        </div>

        <div class="large-5 columns">
          {% if settings.cart_display_note? %}
            {% include 'order-note' %}
          {% endif %}
        </div>

      </div>
    </div>

    <div class="large-5 columns">
      <div class="checkout-actions">
        <h2>
          <span class="price-prefix">{{ 'cart.subtotal' | t }}</span>
          <span class="currency text-color-quiet">{{ shop.currency }}</span>
          <span class="price">{{ cart.total_price | money }}</span>
        </h2>

        <div class="form-actions">
          <input type="submit" class="button secondary large" id="update-cart" name="update" value="{{ 'cart.update' | t }}" />
          <input type="submit" class="button large" name="checkout" value="{{ 'cart.checkout' | t }}" />
        </div>

        {% if additional_checkout_buttons %}
          <div class="additional-checkout-actions">
            {{ content_for_additional_checkout_buttons }}
          </div>
        {% endif %}

        <div class="continue-shopping">
          <a href="/collections/all" data-history-back>{{ 'cart.continue_shopping' | t }}</a>
        </div>

      </div>
    </div>
  </div>
{% include 'delivery-date' %}
</form> 
  
  

{% endif %}

{% if settings.cart_page_content != '' %}
<div class="additional-content">
{{ pages[settings.cart_page_content].content }}
</div>
{% endif %}

{% include 'content-close' %}
{% include 'content-wrap-close' %}

Pretty new to CSS/HTML code so not sure what is going wrong.

The shopify store cart address is : https://www.forbeshomemadegourmet.co.nz/cart

Notice when I go Ctrl+Shift+I and click on Console I'm getting a few errors (see image below)

Anyway some help to bring up the calender when I click on the box would be great!

Thanks
Hughie 

0 Likes
Trey2
Shopify Staff
Shopify Staff
59 0 14

Hey Hughie,

I took a peek at the site and the cart page that you linked, it looks like the delivery date picker is showing up properly at this point in time, it looks like you might have gotten it figured out already? This is what I'm seeing on my end currently

Any updates in particular you might have made that has it properly appearing now? Let me know :)

 

Trey S
support@shopify.com

0 Likes
HF1
New Member
5 0 0

Hi Trey,

Yes I have resolved this issue, someone contacted me directly and sorted it for me.

This is what they said:

"the example that you are using for the date picker is based on another jquery version and your theme is based on the latest jquery version

Good news is that we have resolve the issue.  Go to the the  footer-scripts.liquid under the  Online Store / Themes / snippets folder and 

 

Find the line 

 

{{ '/jquery/2.1.3/jquery.min.js' | prepend: cdnjs | script_tag }} 

 

Replace it with the below code

 

{% if template contains 'cart' %} {% else %}

{{ '/jquery/2.1.3/jquery.min.js' | prepend: cdnjs | script_tag }} 

{%endif  %}

"

Problem solved so all good. 

Thanks 

0 Likes
BJ_McCreary
New Member
1 0 0

I'm having the same issue but the solution here didn't work. I have the field but no calendar function pops-up. My URL is http://www.commongroundsoflexington.com and any help is appreciated. 

0 Likes
KDSweetTreats
New Member
2 0 0

Hi Trey, 

I am trying to add 2 datepickers so I can have one for delivery and one for pick up 
When I add the first one it is working correctly however when I add the second one the calendar box is not popping up. 

I enter the code as the same but just change the name from delivery to pick up. 

Do I have to add extra code to allow for 2 datepickers? I have changed my wording at the moment to just have the one box that is working correctly but I would like to have two. 

0 Likes