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.

Propose

It would be good to mark the answer of @ogborstad as correct as it is compact and easy to grasp. – Viper

Answer 1

Override the key events on the input control.

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

Bedesman

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! – Deppy

Mark this as the correct answer, this answer is simply awesome. :) – Waynant

mmmm... you can still double click on the text and press DEL key – Bartle

Dj Mamana, just add style="pointer-events:none;" for prevent double click – Willie

yet this will kill every action when you try shortcut while focus on it – Latinism

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! – Binaural

Answer 2

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

Sikh

Readonly is the best way to go and it doesn't even need the "add-on" to work. – Provocative

Answer 3

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!

Bichromate

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. – Arboriculture

But this disables the delete and backspace feature as well. How can we cope with that? – Cohosh

Answer 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="" />

Remit

Answer 5

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.

Dejected