Jquery UI datepicker worked on Dev but not on basic plan

Technical Q&A
,

Topic summary

A jQuery UI datepicker stopped functioning after a site launched to production, despite working correctly in the development environment.

The Problem:

  • The datepicker feature broke immediately upon going live
  • Code included jQuery UI library and custom date range logic
  • Issue occurred on petalsloft.com

Root Cause:

  • Variable naming errors in the JavaScript code
  • Specifically, the date range loop used incorrect variable names: startDate and endDate instead of the correctly defined holiday_startDate and holiday_endDate
  • Similar syntax errors were accidentally introduced across multiple calendar implementations on the site

Resolution:

  • Fixed by correcting the variable names in the for loop that populates the date array
  • Changed from new Date(startDate) and new Date(endDate) to new Date(holiday_startDate) and new Date(holiday_endDate)
  • The user realized they had copy-pasted code incorrectly right before launch, creating syntax errors throughout

Status: Resolved - datepicker now works correctly after the variable name corrections.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

I’ve been building a site and we launched today. Everything was working propperly. Upon our launch, the date picker ceased working entirely. Any idea what the issue is?

{{ ‘cal.css’ | asset_url | stylesheet_tag }}

.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem;font-family: var(--font-body-family);color: rgba(var(--color-foreground),.75);font-size: 1.2rem;}

Delivery Date

2

Hi @cedishappy
Can you share the store URL

3

Hi Rishihuptech. Yes, sure.

petalsloft.com

4

@Huptech-Web *

5

Hi @cedishappy
Can you share the screenshot or link or section name where i can find the datepicker.

6

@Huptech-Web

here’s the link! Site is currently live with placeholder input field so I made a test product to replicate the JQuery UI issue: https://www.petalsloft.com/products/live-testing-product

cedishappy_0-1705935608152.png
cedishappy_0-1705935608152.png1318×954 224 KB

7

Hi @cedishappy
The script you have added here: https://prnt.sc/X62uVWLs7Uxg for datepicker, you have defined wrong variables

Replace current script

// populate the array
    for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
        dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
    }

With below script

// populate the array

for (var d = new Date(holiday_startDate); d <= new Date(holiday_endDate); d.setDate(d.getDate() + 1)) {
        dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
    }
8

@Huptech-Web thanks it works now! What a silly error. I had various issues with the other calendars on the site as well. You made me realize that I simply made syntax errors all over the place. Must have copy pasted the code wrongly right before the launch whoops…

Thank you, appreciate the help!

1 Like