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

Question

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

我目前在“调用日期”字段中使用 Bootstrap Datepicker（范围分支），效果非常棒。

虽然我有2个问题:

1) 您可以在输入字段中手动输入字符串。这很奇怪，因为每当您输入非日期值时，original by eyecon都不允许输入当前日期。我尝试了只读属性，但它似乎不起作用，因为它不允许您选择任何日期。

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

Answer 1

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

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

Answer 2

使用 readonly 属性并在输入元素后面附加一个附加组件，以在输入后触发日期选择器：

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

应该可以。

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

Answer 3

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

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

希望它也适合你！

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

就像你所看到的，我刚刚将这个问题的最佳答案升级为 下一代开发人员。

Answer 6

仅此一点就可以解决问题。没有两种办法。