如何以编程方式在日期选择器中设置阻止输入和粘贴操作的日期？

Question

我正在尝试使用 Puppeteer 在 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>

我尝试了几种方法：

直接通过 JavaScript 设置 value 属性。 使用 Puppeteer 逐个字符地输入日期。 调度自定义事件来模拟用户输入。 这些方法都没有反映输入字段中的任何更改，可能是由于日期选择器库本身的内部验证或 JavaScript（它似乎正在使用 datepicker2）。

我的问题： 如何以编程方式在此日期选择器输入字段中设置日期？ Puppeteer 中是否有解决方法来模拟日期选择或绕过这些限制？

任何有关如何克服此问题的见解或建议将不胜感激。预先感谢！

您尝试了什么以及您期待什么？

我尝试了几种方法来以编程方式设置日期：

直接设置 value 属性：我在 Puppeteer 中使用 JavaScript 设置 input.value = '2024/10/30'，期望这会用正确的日期更新字段。但是，页面上的输入没有明显变化，可能是因为日期选择器库的限制。

使用 Puppeteer 的 page.type 方法键入每个字符：我尝试以输入所需的日期格式单独键入每个字符。我预计这会模仿真实的用户输入，但该字段中没有出现日期。看来输入正在主动阻止非数字字符，甚至可能阻止来自自动化工具的键盘事件。

调度自定义事件：我在 JavaScript 中设置值后调度了输入和更改事件，期望这些事件触发任何附加的侦听器并更新日期字段。不幸的是，日期选择器没有响应这些事件，这表明它需要特定的用户操作。

期望： 我的目标是自动化日期输入过程，就像用户手动选择日期一样。理想情况下，我想要一个能够绕过任何库限制或触发日期选择器自己的事件侦听器来接受日期输入的解决方案。

问题： 是否有任何解决方法可能会在日期选择器库（如 datepicker2）中触发正确的日期选择？

Answer 1

我猜问题出在这个属性上：

onpaste="return false;" 

要么完全删除它，要么让它返回 true

onpaste="return true;"

但请注意，不仅 Pupeteer 可以粘贴到此字段，用户也可以粘贴。