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.

回答1:

Override the key events on the input control.

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

回答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

回答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!

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

来源：https://stackoverflow.com/questions/13447057/bootstrap-datepicker-avoid-text-input-or-restrict-manual-input