Javascript 引导日期选择器（避免文本输入或限制手动输入）

这是我的网站：

我目前使用的是我的通话日期字段，这很好

虽然我有两个问题：

1） 您可以在输入字段中手动输入字符串。这很奇怪，因为当您输入非日期值时，系统会禁止您输入当前日期。我尝试了readonly属性，但它似乎不起作用，因为它不允许您选择任何日期

---

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>

这应该行得通

对于第二个问题，您可以从以下位置使用datepicker的修改版本：

---

并使用选项

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

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

---

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

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

---

希望它对你也有用

使用

onKeyDown

属性，如下所示。它对我有用[限制datepicker中的手动输入]

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

---

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

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

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

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

正如你所看到的，我刚刚升级了这个问题的顶部答案 下一代开发人员

---

也是所有类似问题的最佳答案。如果设置为只读或禁用，则会阻止新的HTML输入类型的日期显示浏览器的内置日期选择器。此方法允许默认浏览器体验，但禁止手动输入！将此标记为正确答案，此答案简直太棒了。：）嗯。。。您仍然可以双击文本并按DEL keyDj Mamana，只需添加style=“pointer events:none；”以防止双击，但这将在您尝试快捷方式时终止所有操作，而专注于它

keypress

不考虑删除键。。。我改为使用了

keydown

，并阻止了tab（keycode=9）和return（keycode=13）键上的操作执行。但这也禁用了

delete

和

backspace

功能。我们该如何应对呢？最好将@ogborstad的答案标记为正确的，因为它简洁易懂。只读是最好的方式，它甚至不需要“附加组件”就可以工作。