Question

这是我的网站：http://splash.inting.org/wp/

我目前使用Bootstrap Datepicker (range branch)作为我的通话日期字段，这很棒。

虽然我有 2个问题：

1）您可以在输入字段中手动输入字符串。这很奇怪，因为只要您输入非日期值，original by eyecon就会通过输入当前日期来禁止它。我尝试了readonly属性，似乎没有用，因为它不允许你选择任何日期。

2）我通过修改another post中的答案，将日期输入选项限制为星期二和星期四。加载日期选择器后，选择的默认日期是当前日期，可以是一周中的任何其他日期。我想避免这种情况，只选择星期二或星期四。

Answer 1

覆盖输入控件上的键事件。

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

Answer 2

我设法获得了可接受的解决方案如下：

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

希望它也适合你！

Answer 3

使用readonly属性并在输入元素后附加一个附加组件以在输入后触发datepicker：

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

应该有用。

对于第二个问题，您可以使用此处的修改版本的datepicker： https://github.com/eternicode/bootstrap-datepicker并使用选项daysOfWeekDisabled

Answer 4

使用onKeyDown属性，如下所示。它为我工作[限制日期选择器中的手动输入]

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

Answer 5

禁用输入元素上的键盘事件。

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

为日期和时间等类型的输入元素禁用鼠标点击事件。

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

<块引用>

如你所见，我刚刚升级了这个问题的顶级答案下一代开发者。

Bootstrap Datepicker（避免文本输入或限制手动输入）

5 个答案: