如何用原生JS修改Shopify React日期选择器，实现选日期传提前2天的日期

核心思路 #

由于无法修改应用源码，只能通过原生JS监听DOM元素、拦截用户输入、修改提交值实现需求：

1. 定位用户可见的「配送日期选择器」和应用实际提交的「账单日期字段」
2. 限制配送日期仅能选择周二或周五
3. 用户选择有效配送日期后，自动计算提前2天的账单日期并赋值给目标字段
4. 拦截表单提交，确保最终发送给Shopify的是计算后的账单日期

具体实现代码 #

// 1. 配置目标元素选择器（根据实际页面DOM结构调整）
const DELIVERY_DATE_SELECTOR = '#delivery-date'; // 替换为实际配送日期选择器的CSS选择器
const BILLING_DATE_SELECTOR = '#billing-date'; // 替换为应用实际提交的账单日期字段选择器

// 2. 日期工具函数
// 判断日期是否为周二（1）或周五（4，getDay()返回0=周日）
function isValidDeliveryDate(date) {
  const day = date.getDay();
  return day === 1 || day === 4;
}

// 计算日期提前2天的日期，返回YYYY-MM-DD格式
function getBillingDate(deliveryDate) {
  const billingDate = new Date(deliveryDate);
  billingDate.setDate(billingDate.getDate() - 2);
  return billingDate.toISOString().split('T')[0];
}

// 3. 初始化日期选择限制
function initDateRestriction() {
  const deliveryInput = document.querySelector(DELIVERY_DATE_SELECTOR);
  if (!deliveryInput) return;

  // 监听原生日期输入框的变化事件
  deliveryInput.addEventListener('change', function(e) {
    const selectedDate = new Date(e.target.value);
    if (!isValidDeliveryDate(selectedDate)) {
      alert('仅支持选择周二或周五作为配送日期');
      e.target.value = ''; // 清空无效选择
      return;
    }
    // 计算并设置账单日期
    const billingDate = getBillingDate(selectedDate);
    const billingInput = document.querySelector(BILLING_DATE_SELECTOR);
    billingInput?.setValue(billingDate); // 兼容原生input和自定义组件的赋值逻辑
  });

  // 适配自定义日历组件（非原生date输入框）
  document.addEventListener('click', function(e) {
    // 根据实际日历单元格的类名调整选择器
    if (e.target.classList.contains('calendar-day')) {
      const dateText = e.target.dataset.date; // 假设日期存储在data-date属性中（格式YYYY-MM-DD）
      const selectedDate = new Date(dateText);
      if (!isValidDeliveryDate(selectedDate)) {
        e.preventDefault(); // 阻止选择无效日期
        alert('仅支持选择周二或周五作为配送日期');
      } else {
        // 同步设置账单日期
        const billingDate = getBillingDate(selectedDate);
        const billingInput = document.querySelector(BILLING_DATE_SELECTOR);
        billingInput?.setValue(billingDate);
      }
    }
  });
}

// 4. 拦截表单提交，确保最终提交值正确
function interceptFormSubmission() {
  const checkoutForm = document.querySelector('form[action="/checkout"]');
  if (!checkoutForm) return;

  checkoutForm.addEventListener('submit', function(e) {
    const deliveryInput = document.querySelector(DELIVERY_DATE_SELECTOR);
    const billingInput = document.querySelector(BILLING_DATE_SELECTOR);
    if (!deliveryInput || !billingInput) return;

    const selectedDate = new Date(deliveryInput.value);
    if (!isValidDeliveryDate(selectedDate)) {
      e.preventDefault(); // 阻止提交无效日期
      alert('请选择周二或周五作为配送日期');
    } else {
      // 最后确认赋值，防止中间值被篡改
      const billingDate = getBillingDate(selectedDate);
      billingInput.value = billingDate;
    }
  });
}

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', function() {
  initDateRestriction();
  interceptFormSubmission();
});

使用说明 #

1. 调整选择器：通过浏览器开发者工具的「检查元素」功能，获取实际页面中配送日期选择器和账单日期字段的CSS选择器，替换代码中的对应常量
2. 自定义日历适配：如果应用使用非原生日历组件，需调整点击事件监听的元素类名和日期获取逻辑（比如从元素文本或自定义属性中提取日期）
3. 测试验证：在浏览器控制台运行代码，选择周二/周五后检查账单日期字段是否正确赋值，提交表单时确认数据是否符合要求

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