I want to prevent a single field (of two fields) from loading the date/time picker programmatically.
I am using flatpickr as a date/time selector https://flatpickr.js.org/
I have a form with two fields and two start/top buttons
<p>Start date</p>
<input type="text" id="start_date" name="start_date">
<p>End Date</p>
<input type="text" id="end_date" name="end_date">
<button type="button" class="btn btn-default btn-sm" id="start_tracking">Start Tracking</button>
<button type="button" class="btn btn-default btn-sm" id="stop_tracking">Stop Tracking</button>
When the start button is clicked, I populate the start_date field with the current time. Then I want to prevent the start date from being changed.
The following code disables the fields, but the date picker is still rendered for start date and the field value can be changed. I need a way to disable the flatpickr plugin, but only for the start_date field
$(document).on('click', '#start_tracking', function () {
var dateTime = currentDate();
$("#start_date").val(dateTime);
// This does not disable the datepickr functionality !!
$('#start_date').prop('readonly', true);
})