How to disable calendar dates in a contact form?

[freshleydigital]

Hello,

I am using the standard input type = date within the contact form. The calendar is showing up fine, but I am trying to figure out how to disable specific days my client is closed. How do I go about this?

https://ringmaster-jewelers-nc.myshopify.com/pages/schedule-an-appointment

Pass: freshdigital

 {% when 'calendar' %}
     <label for="contact_datepicker">Preferred Date {% if block.settings.required %}<span class="required">*</span>{% endif %}</label>
     <input
         type="date"
         id="date"
         name="contact[date]"
         class="text-area field__input"
         {% if block.settings.required %}required{% endif %}
         value="">

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

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

[sizzlecentral]

Hi,

Looks like you need to update your "beforeShowDay", something like:

beforeShowDay: function(date) {
    $.datepicker.noWeekends;
    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
    var disabledDays = ['2025-05-01', '2025-05-05', '2025-05-10']; // Array of dates to disable

    return [disabledDays.indexOf(string) == -1]; // Returns [true] if date is not in disabledDays, [false] otherwise
  }

or:

beforeShowDay: function(date) {
    $.datepicker.noWeekends;
    var minDate = new Date('2025-05-01');
    var maxDate = new Date('2025-05-10');

    return [(date < minDate || date > maxDate)]; //Disable dates within the range
  }

Don

[mageplaza-cs]

Hi @freshleydigital

I am from Mageplaza - Shopify solution expert.

You're using <input type="date">, but the script below uses jQuery UI Datepicker, which only works with <input type="text">. If you want to disable specific dates or a date range, you should first change the input type from date to text. After that, you can use the following JavaScript code to replace the current one.

window.onload = function() {
    if (window.jQuery && jQuery.ui) {
      let $ = window.jQuery;

      const disabledDates = [
        '2025-12-25',
        '2025-01-01'
      ];

      const disableRange = {
        start: new Date('2025-05-01'),
        end: new Date('2025-05-07')
      };

      function disableSpecificDates(date) {
        const d = $.datepicker.formatDate('yy-mm-dd', date);

        if (disabledDates.includes(d)) {
          return [false];
        }

        if (date >= disableRange.start && date <= disableRange.end) {
          return [false];
        }

        return [true];
      }

      $("#date").datepicker({
        minDate: +1,
        maxDate: '+2M',
        beforeShowDay: disableSpecificDates
      });
    }
  };

Please let me know if it works as expected!

Best regards!