如何为inline模式的air-datepicker设置默认起始日期？

看起来你已经在配置Air Datepicker的Inline模式了，要设置默认选中的起始日期，这里有两种常用的正确实现方式，我帮你梳理清楚：

方式一：初始化时通过defaultDate选项设置 #

在初始化Datepicker的时候，直接添加defaultDate参数，传入你需要的默认日期对象即可。如果想把关联输入框#search_legs_0_date的现有值作为默认日期，可以这样写：

export function load_datepickers_inline():void { 
  const searchLegs0Datepicker = $("#search_legs_0_datepicker"); 
  // 先获取输入框的日期值，转换为有效的Date对象
  const defaultDateValue = $('#search_legs_0_date').val();
  const defaultDate = defaultDateValue ? new Date(defaultDateValue) : new Date(); // 无值时默认用当前日期

  const leg0Datepicker = searchLegs0Datepicker.datepicker({ 
    language: gon.locale, 
    classes: 'inline-picker', 
    selectOtherMonths: true, 
    showOtherMonths: true, 
    changeMonth: true, 
    changeYear:true, 
    altField: '#search_legs_0_date',
    defaultDate: defaultDate // 这里配置默认起始日期
  }).data('datepicker');
}

方式二：初始化后调用selectDate方法设置 #

如果需要在初始化完成后动态设置默认日期（比如异步获取数据之后），可以先拿到Datepicker实例，再调用selectDate方法：

export function load_datepickers_inline():void { 
  const searchLegs0Datepicker = $("#search_legs_0_datepicker"); 

  const leg0Datepicker = searchLegs0Datepicker.datepicker({ 
    language: gon.locale, 
    classes: 'inline-picker', 
    selectOtherMonths: true, 
    showOtherMonths: true, 
    changeMonth: true, 
    changeYear:true, 
    altField: '#search_legs_0_date'
  }).data('datepicker');

  // 动态设置默认日期，示例：用输入框现有值或当前日期
  const targetDate = new Date($('#search_legs_0_date').val() || Date.now());
  leg0Datepicker.selectDate(targetDate);
}

关键注意点 #

• 确保传入的是有效Date对象：如果是字符串格式的日期，一定要先转换为Date类型，避免出现无效日期的渲染问题。
• 你之前代码里写的selectDate是实例方法，并不是初始化配置项，Air Datepicker的初始化默认日期配置项是defaultDate，别搞混啦。

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