引导日期选取器(避免文本输入或限制手动输入)

Question

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

我目前使用引导日期选择器（范围分支）作为我的呼叫日期字段，这很棒。

虽然我有2个问题：

1）您可以在输入字段中手动输入字符串。这很奇怪，因为原始的 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" ... />

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