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

Posted 2023-05-07

【中文标题】jQuery UI Datepicker 字段不允许手动更改

【英文标题】：jQuery UI Datepicker field disallow change manually

【发布时间】：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 好的。很好的建议，但问题仍然存在？

【参考方案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