jQuery UI Datepicker 字段不允许手动更改答案

【问题标题】：jQuery UI Datepicker field disallow change manuallyjQuery UI Datepicker 字段不允许手动更改
【发布时间】：2012-03-16 18:08:11
【问题描述】：

我的条件：
:
我的代码：

$('#' + '<%=txtFrom.ClientID%>').datepicker({ dateFormat: 'yy-mm-dd' });

我只想选择'yy-mm-dd' 格式的日期。如果它从Datepicker 中选择它的工作。但是textbox 允许手动输入日期，这不是格式。如何强制用户从Datepicker 中选择日期而不是手动？

【问题讨论】：

disableinput（文本框）？
@Stefan 如果我禁用文本框，则不允许单击并且不单击文本框 datepicker 不会出现。 :(
为什么不使用$('#<%=txtFrom.ClientID%>') 方法？这使您的 JS 更具可读性。
@Oybek 好的。很好的建议，但问题仍然存在？

标签： asp.net jquery-ui

【解决方案1】：

protected void Page_PreRender(object sender, EventArgs e)
{
    txtFrom.Attributes["readonly"] = "readonly";
}

【讨论】：

【解决方案2】：

我猜你想禁用输入框的文本输入，是吗？如果是这样，这已经在前面讨论过了。请参考this。

【讨论】：

【解决方案3】：

我可以建议你也屏蔽它。

这里是代码。

<input type="text" id="dtp" />

和javascript：

$("#dtp")
    .datepicker({ dateFormat: 'yyyy-mm-dd' })
    .mask("9999-99-99");

我使用了this 库。

This is a working demo。您可以使用它来满足您的需求。

编辑

我有updated the demo。混合这两个插件有一个警告。但是，我设法以某种方式纠正了它。不是最优雅的解决方案，但有效。 ))

【讨论】：

【解决方案4】：

您可以对该文本框使用该功能。在脚本文件中写入该 jquery。

  <script type="text/javascript" >
    $(document).ready(function ($) {
         $('#<%=txtFrom.ClientID%>').keypress(function () {
            return false;
        });
    });
 </script>

粘贴该代码，当您的焦点位于文本框中时，它将不允许您按键盘上的任何键。 100% 测试代码。

【讨论】：

【解决方案5】：

为这个输入添加只读属性

readonly="只读"

【讨论】：

【解决方案6】：

您可以使用 jquery 工具的库日期选择器。它使用起来非常简单，并且会自动禁用手动输入。

<script src="src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

<!-- dateinput styling -->
<link rel="stylesheet" type="text/css" href="dateinput.css"/>

<!-- HTML5 date input -->
<input type="date" />

<!-- make it happen -->
<script>
  $(":date").dateinput();
</script>

更多信息请参考jquery tools

【讨论】：