Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Datepicker (avoid text input or restrict manual input)

Tags:

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.

like image 700
AnimaSola Avatar asked Nov 19 '12 02:11

AnimaSola


2 Answers

Override the key events on the input control.

<input onkeydown="return false" ... /> 
like image 176
ogborstad Avatar answered Sep 28 '22 10:09

ogborstad


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

like image 37
jmartsch Avatar answered Sep 28 '22 10:09

jmartsch