CODEWITHSUNDEEP
javascriptjquerydatetimepicker
Michael
Michael

Reputation: 51

Enable manual edit for the datetime picker

I am using anytime date time picker plugin that can be found on this page https://www.ama3.com/anytime/

I need the functionality that enables manual edit of the field. The author of the plugin has provided a solution for that. Unfortunately, it's not exactly what I want. Although the field is editable by default once I click on the calendar icon and set the date I cannot manually edit this field anymore. Below is the code from the plugin official page that I have tried. Is there a way to modify it somehow to make it work the way I want. Thank you. 

$('#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>

Upvotes: 0

Views: 1352

Answers (1)

Adityarachman
Adityarachman

Reputation: 86

You need to unbind the keydown event to the input field and then remove the readonly attribute to make it editable.

$('#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>

Upvotes: 2

Related Questions