如何在禁用输入和粘贴的日期选择器中通过代码设置日期？

尝试用Puppeteer自动化操作datepicker2日期选择器输入框时遇到限制：输入框通过onpaste="return false;"禁止粘贴，且无法直接输入特殊字符，常规自动化方法均无效。

输入框HTML结构 #

<div class="input-group decade_date">
  <input type="text" name="passport_issue_date" 
         class="decade form-control form-control valid" 
         onpaste="return false;" 
         required="" 
         data-toggle="tooltip" 
         id="id_passport_issue_date" 
         tabindex="22" 
         aria-required="true" 
         aria-invalid="false">
</div>

已尝试的无效操作 #

• 直接通过JS设置input.value = '2024/10/30'：页面无可见变化
• 使用page.type()逐字符输入日期：输入框未显示日期
• 设置value后派发input/change事件：无响应

需求：实现模拟用户手动选择日期的自动化操作，绕过库限制或触发正确的事件监听器。

1. 调用日期选择器实例的原生API #

多数日期选择器库会暴露实例方法用于设置日期，直接调用这些方法能绕过前端输入限制：

• 如果是基于jQuery的datepicker2，可在页面上下文执行：

  $('#id_passport_issue_date').datepicker('setDate', '2024-10-30');
  

  注意传入的日期格式需匹配库的要求（比如YYYY-MM-DD或YYYY/MM/DD）
• 若页面中存在与输入框关联的隐藏字段，直接设置该字段的value并触发事件

2. 完全模拟用户点击UI操作 #

模拟真实用户唤起并选择日期的流程，这是最可靠的方法：

• 点击输入框唤起日期选择器弹窗
• 通过Puppeteer定位年份、月份、日期对应的DOM元素（比如年份列表的2024、月份的10、日期的30），依次调用page.click()点击这些元素
• 该方法完全贴合用户行为，能绕过大部分前端验证逻辑

3. 触发完整的事件链 #

部分库会监听keydown、keyup、blur等细粒度事件，需模拟完整的输入事件流程：

await page.$eval('#id_passport_issue_date', (el, targetDate) => {
  el.focus();
  el.value = '';
  el.value = targetDate;
  // 触发所有可能触发库更新的事件
  ['input', 'change', 'blur', 'keydown', 'keyup'].forEach(eventName => {
    el.dispatchEvent(new Event(eventName, { bubbles: true, cancelable: true }));
  });
}, '2024/10/30');

确保传入的日期格式与输入框预期格式完全一致

4. 移除输入限制脚本 #

若上述方法无效，可直接禁用页面的输入限制逻辑：

• 移除粘贴限制：

  await page.$eval('#id_passport_issue_date', el => {
    el.onpaste = null;
  });
  

• 移除输入字符限制：找到输入框的input事件监听器并移除，之后再用page.type()或直接设置value的方式输入日期
• 也可通过拦截datepicker2的加载脚本，修改其中的限制逻辑

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