How to restrict user to input data using datetimepicker and disable manual user input?

问题

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?

回答1:

The only way I could think of right now is to use the event.preventDefault() on the keydown event on the input:

<input type="text" id="txtStart" class="form-control" onkeydown="event.preventDefault()">

回答2:

You can use the ignoreReadonly option that:

Allow date picker show event to fire even when the associated input element has the readonly="readonly" property.

Here a working sample:

$('#dtp1').datetimepicker({
    format: 'DD/MM/YYYY HH:mm A',
    daysOfWeekDisabled: [0, 6],
    ignoreReadonly: true
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<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>

回答3:

Both readonly="readonly" & disabled="disabled" didn't worked for me. Below line worked;

<input type="text" onkeydown="return false"/>

来源：https://stackoverflow.com/questions/46375097/how-to-restrict-user-to-input-data-using-datetimepicker-and-disable-manual-user

标签

javascript

jquery

bootstrap-datetimepicker

eonasdan-datetimepicker