X-editable设置combodate类型时返回Script error错误如何解决

算力阿峰

2026-10-5

错误根因

X-editable的combodate类型组件强依赖Moment.js库实现日期的解析、格式化和选择逻辑，你当前引入的静态资源中未包含该依赖，因此只要启用combodate类型就会触发底层调用缺失方法的脚本错误。

修复步骤

1. 引入Moment.js依赖

在你的head标签中，将Moment.js引入放在bootstrap-editable.min.js之前，示例如下：

<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js"></script>
  <!-- 新增Moment.js依赖 -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
</head>

2. 补充combodate必填配置

如果是通过JS初始化组件，需要明确传入日期格式相关参数，避免日期解析报错：

$("#date2").editable({
  type: 'combodate',
  url: '/post',    
  pk: 490,    
  title: 'Enter date',
  // 补充日期格式配置，和你展示的日期格式匹配即可
  format: 'YYYY-MM-DD',
  viewformat: 'YYYY-MM-DD',
  template: 'YYYY / MM / DD',
  ajaxOptions: {
    dataType: 'json'
  },
  success: function(response, newValue) {
    if(!response) {
      return "Unknown error!";
    }          

    if(response.success === false) {
         return response.msg;
    }
  }        
});