CODEWITHSUNDEEP
javascriptwordpresstwitter-bootstrapdatepickeruser-input
AnimaSola
AnimaSola

Reputation: 7846

Bootstrap Datepicker (avoid text input or restrict manual input)

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.

Upvotes: 31

Views: 64604

Answers (5)

Mohamed Reda
Mohamed Reda

Reputation: 146

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.

Upvotes: 2

krish007
krish007

Reputation: 173

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

Upvotes: 4

Ye Yint
Ye Yint

Reputation: 924

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!

Upvotes: 6

ogborstad
ogborstad

Reputation: 2477

Override the key events on the input control.

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

Upvotes: 156

jmartsch
jmartsch

Reputation: 352

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

Upvotes: 8

Related Questions