jQuery Datepicker结账日期选择验证代码求助

首先注意你的日期输入框存在重复id的问题（同时设置了id="date"和id="datepicker"），这会导致DOM选择器异常，先修正input标签：

<input id="date" type="text" name="datepicker" readonly="readonly" value="{{ cart.attributes.date }}" />

接下来添加结账验证逻辑，根据你的场景选择以下两种方式之一：

方式1：监听结账按钮点击 #

假设你的结账按钮id为checkout-button（如果实际按钮类名或id不同，自行修改选择器），在现有脚本中添加点击事件验证：

// 新增：结账按钮点击验证
$('#checkout-button').on('click', function(e) {
  const selectedDate = $('#date').val().trim();
  if (!selectedDate) {
    e.preventDefault(); // 阻止默认跳转/提交行为
    alert('请选择日期'); // 弹出错误提示
    // 可选：添加页面内提示（替代alert）
    // $('#date').after('<span style="color:red;" class="date-error">请选择日期</span>');
    // setTimeout(() => $('.date-error').remove(), 3000);
  }
});

方式2：监听结账表单提交 #

如果结账流程是通过表单提交触发的，监听表单的submit事件更可靠（假设表单id为checkout-form）：

// 新增：表单提交验证
$('#checkout-form').on('submit', function(e) {
  const selectedDate = $('#date').val().trim();
  if (!selectedDate) {
    e.preventDefault(); // 阻止表单提交
    alert('请选择日期');
    $('#date').focus(); // 聚焦到日期输入框，引导用户选择
  }
});

整合后的完整脚本 #

将验证代码插入到现有Datepicker初始化代码之后：

if (window.jQuery) {
let $ = window.jQuery;

$(function() {
  // Dates to exclude
  var excludeDays = ['2021-09-04', '2021-09-12'];

  function disableSpecificDate(date) {
    // To disable specific day
    var dateArr = [String(date.getFullYear()), String(date.getMonth() + 1), String(date.getDate())];
    if (dateArr[1].length == 1) dateArr[1] = "0" + dateArr[1];
    if (dateArr[2].length == 1) dateArr[2] = "0" + dateArr[2];
    return excludeDays.indexOf(dateArr.join("-")) == -1;
  }
  $("#date").datepicker({
    dateFormat: 'dd/mm/yy',
    minDate: +1,
    maxDate: '+1M',
    beforeShow: function() {
      // To exclude next business day after 12 PM
      if (new Date().getHours() >= 12) {
        $(this).datepicker("option", "minDate", +2);
      }
    },
    beforeShowDay: function(date) {
      var day = date.getDay();
      return [((day == 0 || day == 2 || day == 3 || day == 5 || day == 6) ? false : disableSpecificDate(date)), ''];
    }
  });

  // -------------- 新增验证代码 --------------
  // 方式1：监听结账按钮点击（二选一）
  $('#checkout-button').on('click', function(e) {
    const selectedDate = $('#date').val().trim();
    if (!selectedDate) {
      e.preventDefault();
      alert('请选择日期');
    }
  });

  // 方式2：监听表单提交（二选一，注释掉方式1后启用）
  // $('#checkout-form').on('submit', function(e) {
  //   const selectedDate = $('#date').val().trim();
  //   if (!selectedDate) {
  //     e.preventDefault();
  //     alert('请选择日期');
  //     $('#date').focus();
  //   }
  // });
});
}

注意事项 #

• 替换代码中的#checkout-button或#checkout-form为你实际页面中对应的元素选择器
• 如果需要更美观的提示效果，可以替换alert为自定义的页面错误提示元素
• 确保jQuery和jQuery UI已正确加载，避免出现$ is not defined的错误

内容的提问来源于stack exchange，提问作者user20949508