我正在使用可以在此页面上找到的任何时间日期时间选择器插件
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/

10-16 23:38