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

Posted 2023-02-22

【中文标题】Bootstrap Datepicker（避免文本输入或限制手动输入）

【英文标题】：Bootstrap Datepicker (avoid text input or restrict manual input)

【发布时间】：2012-11-06 23:26:39

【问题描述】：

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

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

虽然我有2个问题：

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

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

【问题讨论】：

最好将@ogborstad 的答案标记为正确，因为它紧凑且易于掌握。

【参考方案1】：

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

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

【讨论】：

也是所有类似问题的最佳答案。如果您设置为只读或禁用，这会阻止新的 html 输入日期类型显示浏览器的内置日期选择器。此方法允许默认浏览器体验但禁止手动输入！

将此标记为正确答案，这个答案简直太棒了。 :)

mmmm...您仍然可以双击文本并按DEL键

Dj Mamana，只需添加 style="pointer-events:none;"防止双击

然而，当你在专注于它的同时尝试快捷方式时，这会杀死每一个动作

【参考方案2】：

使用 readonly 属性并在 input 元素后附加一个 add-on 以在输入后触发 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>

应该可以的。

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

【讨论】：

只读是最好的方法，它甚至不需要“插件”来工作。

【参考方案3】：

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

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

希望它也对你有用！

【讨论】：

keypress 不考虑删除键...我改用keydown 并阻止在选项卡（keycode = 9）和返回（keycode = 13）键上执行操作。跨度>

但这也会禁用delete 和backspace 功能。我们该如何应对？

【参考方案4】：

使用onKeyDown 属性如下。它对我有用[限制日期选择器中的手动输入]

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

【参考方案5】：

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

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

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

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

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