JQuery Calendar Date Picker - Show Calendar without Clicking

Question

On our website we currently have the Jquery date picker implemented, but my boss would like it if the calendar could just be active the whole time without the user needing to click on it to get the calendar to pop up. I know I can hide the textbox with the hidden feature, so it will still pass the information the information along. I just can't figure out how to get it to display just the calendar itself all the time without the textbox being present or needing to toggle something since the code itself never seems to trigger a click event and must be in the base JS of the Jquery calendar.

Our current code:

    {{ '//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>
<p></p><div style="display: flex; margin-left:auto !important;">
  <div style="width:400px; clear:both; float:right; margin-left:auto !important;">
  
  <p style="float:right;">
    
    <label style="float:right;font-size: 30px;font-weight: bold; position:relative; left: -25px;" for="date">Select Future Delivery Date:</label>
    <input style="float:right; position:relative; left: -35px; width: 365px" id="date" type="text" name="attributes[date]" value="{{ line_item.attributes.date }}" />
    <span class="instructions"> </span>
  </p>
</div>
</div>
<script>
  window.onload = function() {
    if (!window.jQuery) return;
    let $ = window.jQuery;
    
    // 1) List your blocked dates here (in YYYY-MM-DD format)
    const blocked = ["2025-05-26","2025-07-04"];
    
    // 2) Function to calculate dynamic minDate based on current day/time
    function calculateMinDate() {
      const now = new Date();
      
      // Convert to Eastern Time
      const easternTime = new Date(now.toLocaleString("en-US", {timeZone: "America/New_York"}));
      const currentDay = easternTime.getDay(); // 0=Sunday, 1=Monday, ..., 6=Saturday
      const currentHour = easternTime.getHours();
      
      let minDate;
      
      if (currentDay >= 1 && currentDay <= 3) { // Monday (1) through Wednesday (3)
        if (currentHour >= 14) { // 2pm (14:00) or later
          minDate = 3;
        } else { // Before 2pm
          minDate = 2;
        }
      } else if (currentDay === 4) { // Thursday
        if (currentHour >= 14) { // 2pm or later on Thursday
          // Next Tuesday is 5 days from Thursday (Thu->Fri->Sat->Sun->Mon->Tue)
          minDate = 5;
        } else { // Before 2pm on Thursday
          // Next Monday is 4 days from Thursday (Thu->Fri->Sat->Sun->Mon)
          minDate = 4;
        }
      } else if (currentDay === 5) { // Friday
        // Next Tuesday is 4 days from Friday (Fri->Sat->Sun->Mon->Tue)
        minDate = 4;
      } else if (currentDay === 6) { // Saturday
        // Next Tuesday is 3 days from Saturday (Sat->Sun->Mon->Tue)
        minDate = 3;
      } else { // Sunday (0)
        // Next Tuesday is 2 days from Sunday (Sun->Mon->Tue)
        minDate = 2;
      }
      
      return minDate;
    }
    
    // 3) Build a beforeShowDay function
    function customDay(date) {
      // format the date as "YYYY-MM-DD"
      const y = date.getFullYear();
      const m = ("0" + (date.getMonth() + 1)).slice(-2);
      const d = ("0" + date.getDate()).slice(-2);
      const str = `${y}-${m}-${d}`;
      
      // a) block weekends:
      const weekendResult = $.datepicker.noWeekends(date);
      if (!weekendResult[0]) {
        // [false] → disabled weekend
        return weekendResult;
      }
      
      // b) block any dates in your list:
      if (blocked.indexOf(str) !== -1) {
        return [false, "", "Unavailable"];
      }
      
      // otherwise enable
      return [true, ""];
    }
    
    // 4) Initialize datepicker with dynamic minDate
    $(function() {
      const initialMinDate = calculateMinDate();
      
      $("#date").datepicker({
        minDate: initialMinDate,
        maxDate: "+12M",
        beforeShowDay: customDay
      });
      
      // Update minDate every minute to handle time changes
      setInterval(function() {
        const newMinDate = calculateMinDate();
        const currentMinDate = $("#date").datepicker("option", "minDate");
        if (newMinDate !== currentMinDate) {
          $("#date").datepicker("option", "minDate", newMinDate);
        }
      }, 60000); // Check every minute
    });
  };
</script>

Attach the datepicker to a div rather than an input. So make #date a div. — Barmar
– Barmar, Commented Jun 25 at 20:25

yoduh · Accepted Answer · 2025-06-26 02:59:07Z

1

It's described in the documentation:

Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.

Simply change

<input id="date" ... />

to

<div id="date" ... />

You will need an additional hidden input and use of the onSelect option if you want to store the datepicker value somewhere.


<div id="date" ... />
<input type="hidden" id="datehidden" /> <!-- hidden input for date value -->

$("#date").datepicker({
  minDate: initialMinDate,
  maxDate: "+12M",
  beforeShowDay: customDay,
  onSelect: function (dateText) {    // Set hidden input with datepicker value
    $("#datehidden").val(dateText);
  }
});

answered Jun 26 at 2:59

yoduh

15.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Calendar Date Picker - Show Calendar without Clicking

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related