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

Question

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?

calendar screen shot

What if i want to change the time 06:00 to w/c - (Text)? i am using the datetimepicker also and textbox is not readonly because user want to change the only time to some text like w/c. In the textbox i can change the time to text but if exit out of that the values remains changing befault timepicker value — Mahendra, Apr 14 '21 at 05:13

Manuel Otto · Accepted Answer · 2021-04-19T18:12:35.910

12

Use the event.preventDefault() on the keydown event on the input:

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

edited Apr 19 '21 at 18:12

answered Sep 23 '17 at 01:33

Manuel Otto

6,410
1
18
25

Both onkeydown="return false" or onkeydown="event.preventDefault()" worked for me. Thank you. However, is it possible to open the calendar when the input field gets focused? Rather than clicking on the calendar icon? – Big Smile Sep 23 '17 at 01:47
@H.Khan hmm, it opens on focus when I try it on the jquery demo page.. Is your setup different? By focus you mean when you focus it via the tab key? – Manuel Otto Sep 23 '17 at 01:49
It doesn't open on focus when I try it. I am using MVC5 and fairly new to it. – Big Smile Sep 23 '17 at 01:54
did you try `onfocus="this.click()"` ? – Manuel Otto Sep 23 '17 at 01:58
Yes, I tried adding onfocus="this.click()" to the input field but still no luck :( – Big Smile Sep 23 '17 at 02:13
1

[I am using this datetimepicker](https://eonasdan.github.io/bootstrap-datetimepicker/) – Big Smile Sep 23 '17 at 02:23
@H.Khan oh, well, in this case you have to use `onfocus="$(this).next().trigger('click')"` – Manuel Otto Sep 23 '17 at 02:28
1

You're welcome, Khan. :) Next time, make sure to state the exact version/library used to ensure better and faster support. – Manuel Otto Sep 23 '17 at 02:37
Thank you for your suggestions. I will make sure I provide all the necessary information before asking a question. – Big Smile Sep 23 '17 at 05:35
@ManuelOtto you solution may work, but I fear that it will be not valid for all cases e.g. if I want to place the calendar icon on the right side of the input. See my answer, I suggest to use the [`ignoreReadonly`](https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly) option of the component. – VincenzoC Sep 25 '17 at 22:12

score 5 · Answer 2 · answered Sep 25 '17 at 22:07

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>

score 1 · Answer 3 · answered Sep 23 '17 at 01:37

1

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

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

answered Sep 23 '17 at 01:37

msg

1,480
3
18
27

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

3 Answers3

Linked