AirDatepicker v3.3.5如何通过JS代码设置日期范围？

在AirDatepicker 3.x版本中，官方提供了setDate方法来动态修改选中日期，无需重新创建实例，这比重新初始化更高效且能保留原有实例的状态和事件绑定。

具体实现步骤 #

1. 获取已存在的Datepicker实例

   • 如果是通过jQuery方式初始化的，注意3.x版本中实例存储的键名从datepicker改为了airDatepicker：

     const dateRangeInput = $('.date-range');
     const datepickerInstance = dateRangeInput.data('airDatepicker');
     

   • 如果是通过原生JS初始化的，直接使用初始化时保存的实例引用即可：

     // 初始化时保存实例
     const dp = new AirDatepicker('.date-range', {
       range: true,
       multipleDatesSeparator: ' - ',
       // 其他配置项
     });
     

2. 调用setDate方法设置日期范围
   在range模式下，直接传入包含起始和结束日期的数组即可：

   // date1和date2可以是Date对象或符合配置格式的字符串
   datepickerInstance.setDate([date1, date2], true);
   

   • 第二个参数true表示触发onChange事件，若不需要触发可省略（默认值为false）。

为什么不推荐重新创建实例？ #

• 重新初始化会销毁原有实例，导致之前绑定的自定义事件、状态丢失；
• 重复创建实例会增加不必要的性能开销，尤其在频繁修改日期范围的场景下。

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