javascript - 为日期时间选择器启用手动编辑

我正在使用可以在此页面上找到的任何时间日期时间选择器插件
https://www.ama3.com/anytime/

我需要启用手动编辑字段的功能。插件的作者为此提供了解决方案。不幸的是，这并不是我想要的。尽管在单击日历图标并设置日期后，默认情况下该字段是可编辑的，但我无法再手动编辑此字段。以下是我尝试过的插件官方页面中的代码。有没有办法修改它，使其以我想要的方式工作。谢谢。

$('#ButtonCreationDemoButton').click(function(e) {
  $('#ButtonCreationDemoInput').AnyTime_noPicker().AnyTime_picker().focus();
  e.preventDefault();
});

<link href="https://www.ama3.com/anytime/anytime.5.2.0.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.ama3.com/anytime/anytime.5.2.0.js"></script>
<input type="text" id="ButtonCreationDemoInput"/>
<button id="ButtonCreationDemoButton">
  <img src="calendar.png" alt="[calendar icon]"/>
</button>

最佳答案

您需要将keydown事件解除绑定到输入字段，然后删除readonly属性以使其可编辑。

$('#ButtonCreationDemoButton').click(function(e) {
  $('#ButtonCreationDemoInput').AnyTime_noPicker().AnyTime_picker().focus();
  //remove readonly for the input field each button datepicker clicked
  $('#ButtonCreationDemoInput').attr("readonly", false);
  //unbind "keydown" event for the input field to make it editable
  $('#ButtonCreationDemoInput').unbind("keydown");
  e.preventDefault();
});

<link href="https://www.ama3.com/anytime/anytime.5.2.0.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.ama3.com/anytime/anytime.5.2.0.js"></script>
<input type="text" id="ButtonCreationDemoInput"/>
<button id="ButtonCreationDemoButton">
  <img src="calendar.png" alt="[calendar icon]"/>
</button>

关于javascript - 为日期时间选择器启用手动编辑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57764080/