时间戳

首页 > 解决方案 > 为日期时间选择器启用手动编辑

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>

标签： javascriptjquerydatetimepicker

解决方案

您需要解除 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>

推荐阅读