I want to restrict the user to only input data using the datetimepicker. Below is the code I am using:
<div class="form-group">
<label>Start</label>
<div class="input-group date" id="dtp1">
<input type="text" id="txtStart" class="form-control" readonly="readonly"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
$('#dtp1').datetimepicker({
format: 'DD/MM/YYYY HH:mm A',
daysOfWeekDisabled: [0, 6]
});
I have tried using the readonly attribute, but this disables both the input and datetimepicker. Is there any way through which I can disable the input field but still allow the user to click on the calendar icon to pick a date?
Both readonly="readonly" & disabled="disabled" didn't worked for me. Below line worked;
You can use the
ignoreReadonly
option that:Here a working sample:
The only way I could think of right now is to use the
event.preventDefault()
on the keydown event on the input: