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

Question

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

以下是 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:support@packedwithpurpose.gifts" target="_blank">support@packedwithpurpose.gifts</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()

来修复此问题

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

Pure JavaScript Datepicker displays calendar only once to never do it again in a Shopify cart page

html

javascript

jquery

frontend

dhtml