点击按钮重置Datepicker出现重复实例，如何无重复完成Datepicker重置？

算力阿峰

2026-10-4

Datepicker重复实例问题解决方法

问题原因

你每次调用datePicker()函数时都会重新对.datepicker-end元素执行datetimepicker初始化操作，重复初始化会生成多个实例，是问题的核心诱因
重置方法API不匹配：初始化时使用的是datetimepicker插件，重置时调用的是datepicker的setDate方法，API不对应也会导致功能异常

代码修改方案

初始化逻辑修改（避免重复生成实例）

function datePicker()
{
  var datePickerValue =  $('.datepicker-start').val();
  var date = new Date(datePickerValue);
  date.setDate(date.getDate() + 1);
  var dd = date.getDate();
  var mm = date.getMonth() + 1;
  var y = date.getFullYear();
  var newEndDate = y + '-'+ mm + '-'+ dd;
  // 先判断是否已存在datetimepicker实例
  if (!$('.datepicker-end').data('DateTimePicker')) {
    // 无实例时首次初始化
    $('.datepicker-end').datetimepicker({
        format: 'YYYY-MM-DD',
        minDate: newEndDate,
    });
  } else {
    // 有实例时直接更新配置，不重复初始化
    $('.datepicker-end').data('DateTimePicker').minDate(newEndDate);
  }
}

重置逻辑修改（适配对应插件API）

function reset()
{
    // 调用datetimepicker内置方法清空选中值
    $('.datepicker-end').data('DateTimePicker').clear();
    // 如果需要彻底销毁旧实例，可额外添加下行代码，下次调用datePicker会重新初始化
    // $('.datepicker-end').data('DateTimePicker').destroy();
}