纯JavaScript DatePicker仅显示日历一次，在Shopify购物车页面中再也不会再做一次

Question

为了提高 Shopify 商店的性能，我们决定在整个网站上尽量减少 jQuery 的使用。在 cartpage 中，我添加了一个纯 JavaScript 日期选择器，有时它只显示一次日历，之后就不再显示。我确保主题中仅加载一个版本的 jQuery，认为其他 Shopify 应用程序的多个实例可能会导致此问题。但即使现在主题中加载了单个 jQuery 实例，问题仍然存在。我没有看到任何控制台错误。请将产品添加到购物车，然后通过单击日期选择器转到购物车页面查看此问题。以下是预览主题的链接。

以下是 pickaday 插件的日期选择器代码。

<div class="cart-attribute__field">
  <p>
    <label for="ship_date">Ordering early? Pick a future ship date here:</label>
    <input id="ship_date" type="text" name="attributes[ship_date]" value="{{ cart.attributes.ship_date }}" />
  </p>
</div>
<p class="shipping-text">If you are placing an order with <b>a future ship date</b> that <u>also</u> includes multiple addresses please email <a href="mailto:[email protected]" target="_blank">[email protected]</a> upon placing your order to confirm your preferred ship date.</p>
<!-- Added 11162020 -->
<p class="shipping-text">Please note that specifying a date above ensures your gift is packaged and shipped on that date. <b>This is not a delivery date.</b> As we work with third party shipping agencies, your delivery date is subject to the specific carrier selected as well as your shipping destination. Please find our estimated shipping transit times for all regions of the US <strong><a href="https://packedwithpurpose.gifts/shipping-returns/" target="_blank" style="text-decoration: underline;">here</a></strong>.</p>

<script type="text/javascript">
(function() {
  var disabledDays = ["2022-12-23","2022-12-24","2022-12-25","2022-12-30","2022-12-31","2023-1-1"];
  var minDate = new Date();
  var maxDate = new Date();
  maxDate.setDate((maxDate.getDate()) + 60);
  minDaysToShip = 2;        // Default minimum days
  if (minDate.getDay() == 5) {
    // Friday. Set min day to Tuesday. 4 days from now.
  minDaysToShip = 4;
  } else if (minDate.getDay() == 6) {
    // Saturday. Set min day to Tuesday. 3 days from now.
    minDaysToShip = 3;
  }
  minDate.setDate(minDate.getDate() + minDaysToShip);
  var picker = new Pikaday(
  {
      field: document.getElementById('ship_date'),
      format: 'MM/DD/YYYY',
      disableWeekends: 'true',
      toString(date, format) {
        // you should do formatting based on the passed format,
        // but we will just return 'D/M/YYYY' for simplicity
        const day = ("0" + date.getDate()).slice(-2);
        // Get two digit month ("0" + (this.getMonth() + 1)).slice(-2)
        const month = ("0" + (date.getMonth() + 1)).slice(-2);
        const year = date.getFullYear();
        return `${month}/${day}/${year}`;
      },
      parse(dateString, format) {
        // dateString is the result of `toString` method
        const parts = dateString.split('/');
        const day = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10) - 1;
        const year = parseInt(parts[2], 10);
        return new Date(year, month, day);
      },
      firstDay: 0,
      minDate: minDate,
      maxDate: maxDate,
      disableDayFn: function(inputDate) {
        // Disable national holidays
        var formattedDate = inputDate.getFullYear() + '-' + (inputDate.getMonth() + 1) + '-' + inputDate.getDate();
        return ((disabledDays.indexOf(formattedDate) == -1) ? false : true);
      }
  });
})();
</script>

Answer 1

通过将 (function() 替换为 window.addEventListener("load", function()) 来修复此问题