WooCommerce Bookings日历前端不显示，控制台报TypeError错误求助

此前网站使用WooCommerce Bookings插件的预约日历功能正常，但近几周前端日历停止显示，浏览器控制台报错如下：

date-picker.js:1064 Uncaught TypeError: Cannot read properties of undefined (reading '2022-8-29')
    at o.getDateElementAttributes (date-picker.js:1064:26)
    at o.maybe_load_from_cache (date-picker.js:712:21)
    at e._generateHTML (datepicker.min.js?ver=1.13.1:9:30695)
    at e._updateDatepicker (datepicker.min.js?ver=1.13.1:9:14501)
    at e._refreshDatepicker (datepicker.min.js?ver=1.13.1:9:9945)
    at HTMLDivElement.<anonymous> (datepicker.min.js?ver=1.13.1:9:36351)
    at Function.each (jquery.min.js?ver=3.6.0:2:3003)
    at s.fn.init.each (jquery.min.js?ver=3.6.0:2:1481)
    at V.fn.datepicker (datepicker.min.js?ver=1.13.1:9:36283)
    at Object.refresh_datepicker (date-picker.js:263:12)
o.getDateElementAttributes @ date-picker.js:1064
o.maybe_load_from_cache @ date-picker.js:712
_generateHTML @ datepicker.min.js?ver=1.13.1:9
_updateDatepicker @ datepicker.min.js?ver=1.13.1:9
_refreshDatepicker @ datepicker.min.js?ver=1.13.1:9
(anonymous) @ datepicker.min.js?ver=1.13.1:9
each @ jquery.min.js?ver=3.6.0:2
each @ jquery.min.js?ver=3.6.0:2
V.fn.datepicker @ datepicker.min.js?ver=1.13.1:9
refresh_datepicker @ date-picker.js:263
(anonymous) @ date-picker.js:689
c @ jquery.min.js?ver=3.6.0:2
fireWith @ jquery.min.js?ver=3.6.0:2
(anonymous) @ date-picker.js:861
c @ jquery.min.js?ver=3.6.0:2
fireWith @ jquery.min.js?ver=3.6.0:2
l @ jquery.min.js?ver=3.6.0:2
(anonymous) @ jquery.min.js?ver=3.6.0:2
load (async)
send @ jquery.min.js?ver=3.6.0:2
ajax @ jquery.min.js?ver=3.6.0:2
s.ajax.s.ajax @ jquery-migrate.min.js?ver=3.3.2:2
o.get_data @ date-picker.js:825
o.create @ date-picker.js:687
date_picker_init @ date-picker.js:256
(anonymous) @ date-picker.js:30
each @ jquery.min.js?ver=3.6.0:2
each @ jquery.min.js?ver=3.6.0:2
init @ date-picker.js:25
(anonymous) @ date-picker.js:1152
e @ jquery.min.js?ver=3.6.0:2
t @ jquery.min.js?ver=3.6.0:2
setTimeout (async)
(anonymous) @ jquery.min.js?ver=3.6.0:2
c @ jquery.min.js?ver=3.6.0:2
fireWith @ jquery.min.js?ver=3.6.0:2
fire @ jquery.min.js?ver=3.6.0:2
c @ jquery.min.js?ver=3.6.0:2
fireWith @ jquery.min.js?ver=3.6.0:2
ready @ jquery.min.js?ver=3.6.0:2
B @ jquery.min.js?ver=3.6.0:2

网站环境信息 #

• WordPress版本：6.0.2
• PHP版本：7.4
• WooCommerce版本：6.8.2
• WooCommerce Bookings版本：1.15.60

排查与解决步骤 #

• 检查异常日期数据：报错明确指向2022-8-29这个日期无法读取，登录后台检查该日期的预约记录，清理已删除预约的残留数据、修复库存设置冲突或异常订单。
• 清除日历缓存：进入WooCommerce设置>Bookings>常规选项，手动清除日历缓存；同时清理网站页面缓存、CDN缓存及插件缓存。
• 调整插件版本：检查WooCommerce Bookings是否有最新版本，更新至最新版测试；若为更新插件后出现问题，回滚到之前正常运行的版本。
• 排查冲突问题：临时禁用所有其他插件，切换到WooCommerce官方默认主题Storefront，测试日历是否恢复，排查第三方插件或主题的JS/jQuery冲突。
• 临时修复JS报错：若上述方法无效，可修改date-picker.js第1064行（修改前务必备份文件），添加undefined判断避免报错：

  // 原代码示例（需根据实际代码调整）
  var dateAttrs = this.cache.dates[dateKey];
  // 修改为
  var dateAttrs = this.cache.dates?.[dateKey] || {};
  

  建议用自定义JS插件或子主题JS文件覆盖核心代码，避免插件更新后丢失修改。
• 校验时区设置：确保WordPress后台时区设置（设置>常规）与服务器时区一致，避免日期格式解析错误。

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