Bootstrap Datepicker (avoid text input or restrict manual input)

Question

Here is my website: http://splash.inting.org/wp/

I currently use the Bootstrap Datepicker (range branch) for my Call Date field and it's been great.

Although I have 2 Problems:

1) You can manually enter strings in the input field. This is weird since the original by eyecon disallowed it by entering the current date whenever you enter non-date values. I tried the readonly attribute and it doesn't seem to work because it won't allow you to select any date.

2) I limited the date input choices to Tuesdays and Thursdays by modifying an answer in another post. Upon loading the datepicker, the default date chosen is the current date, which can be any other day of the week. I want to avoid this and have only either Tuesdays or Thursdays selected.

It would be good to mark the answer of @ogborstad as correct as it is compact and easy to grasp. — ProfDFrancis, Nov 08 '18 at 10:37

score 151 · Accepted Answer · answered Feb 23 '15 at 09:38

151

Override the key events on the input control.

<input onkeydown="return false" ... />

answered Feb 23 '15 at 09:38

ogborstad

2,309
2
19
22

The best answer of all similar questions too. If you make readonly or disabled, this prevents the new HTML input type of date from displaying the browser's built-in date picker. This method allows the default browser experience but prohibits manual input! – Jon Bellamy Mar 01 '16 at 10:52
Mark this as the correct answer, this answer is simply awesome. :) – Dexter Raymund De Guia Mar 16 '16 at 03:32
2

mmmm... you can still double click on the text and press DEL key – Dj Mamana Sep 22 '16 at 02:39
Dj Mamana, just add style="pointer-events:none;" for prevent double click – nektobit Apr 26 '18 at 03:33
yet this will kill every action when you try shortcut while focus on it – Munkhdelger Tumenbayar Nov 06 '19 at 09:25
Wow, amazing answer! I was trying to first add key event that would filter out letters for date input field, but this is much better as I have popup datepicker. Thanks! – VPetrovic Jun 26 '23 at 10:52

jmartsch · Answer 2 · 2013-01-14T23:11:39.487

8

Use the readonly attribute and append an add-on after the input element to trigger the datepicker after the input:

<input type="text" name="CallDate" value="" id="CallDate" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-medium date date-pick" size="40" readonly>
<span class="add-on"><i class="icon-calendar"></i></span>

that should work.

For the second problem you could use a modified version of the datepicker from here: https://github.com/eternicode/bootstrap-datepicker and use the option daysOfWeekDisabled

edited Jan 14 '13 at 23:11

answered Jan 14 '13 at 22:55

jmartsch

343
1
14

Readonly is the best way to go and it doesn't even need the "add-on" to work. – monami Sep 06 '19 at 14:48

score 6 · Answer 3 · answered Sep 17 '17 at 09:22

6

I managed to get acceptable solution as follow:

$(".date").datetimepicker({
    defaultDate: moment(),
    format: 'YYYY-MM-DD'
}).end().on('keypress paste', function (e) {
    e.preventDefault();
    return false;
});

Hope it works for you too!

answered Sep 17 '17 at 09:22

Ye Yint

859
2
11
21

1

`keypress` doesn't account for delete key... I used `keydown` instead and prevented the action execution on tab (keycode = 9) and return (keycode = 13) keys. – Pablo Jan 17 '18 at 16:19
But this disables the `delete ` and `backspace` feature as well. How can we cope with that? – HexaCrop May 22 '18 at 10:15

krish007 · Answer 4 · 2018-04-03T15:26:51.997

4

Use onKeyDown attribute as below. It`s working for me [To Restrict the manual input in datepicker]

  <input type="text" id="signedDate" name="signedDate" 
  onkeydown="event.preventDefault()" class="form-control input-med datepicker" 
  maxlength="10" placeholder="" />

edited Apr 03 '18 at 15:26

answered Apr 02 '18 at 12:49

krish007

173
2
4

score 1 · Answer 5 · answered May 20 '21 at 14:55

Disable the keyboard events on the input element.

<input onkeydown="return false" ... />

Disable the mouse click events for input element of types like date & time.

<input type="date" onkeydown="return false" onclick="return false" ... />
<input type="time" onkeydown="return false" onclick="return false" ... />

Like you can see, I just upgraded the top answer of this question for the next coming generation of developers.

Bootstrap Datepicker (avoid text input or restrict manual input)

5 Answers5

Linked