Jquery Datepicker 与 ASP.NET 中的 TextBox

Question

我有 jquery datepicker 与 asp.net 中的文本框的问题，但我没有解决它。 请帮我！ .对不起，我的语法不好。 :D

<link rel="Stylesheet" type="text/css" href="styles/jquery.datepick.css"/>
<script type="text/javascript" src="scripts/jquery.datepick.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(function () {

            $("#" + '<%=txtReleaseDate.ClientID%>').datepicker();
    });
});
</script>

我的文本框：

<asp:TextBox ID="txtReleaseDate" runat="server" CssClass="js-date-picker">  </asp:TextBox>

我的文本框不显示日期选择器

Answer 1

在 javascript 的 pageload() 中编写代码。

function pageLoad(){
   $('input[id*=txtReleaseDate]').datepicker();
}

Answer 2

尝试将 ClientIDMode="Static" 添加到您的文本框，然后更新您的脚本以引用 $('#txtReleaseDate')... 使用“

如果它不起作用，您的浏览器调试器工具会显示什么（IE\Chrome 中的 F12，Firefox 中的 Firebug）？你有错误吗？

Answer 3

你定义了一个函数但没有调用它。 只需删除$(function () {

$(document).ready(function () {
    $("#" + '<%=txtReleaseDate.ClientID%>').datepicker();
});

或者执行（不推荐）：

$(document).ready(function () {
        $(function () {
                $("#" + '<%=txtReleaseDate.ClientID%>').datepicker();
        })();
});

Answer 4

// First notation
$(function() {
    // Code here
});

// Second notation
$(document).ready(function() {
    // Code here
});

这 2 个代码块是等效的，我的第一个建议是选择一个，你更习惯的那​​个，并坚持下去。

第二个建议，关于 jQuery UI 的日期选择器：不要依赖控件 ID，这会迫使你在 JS 代码中引入服务器标签，只需选择一个 CSS 类，你将使用它来标记你想要应用 jQuery UI 的控件日期选择器到。

这样，您将保持您的 JS 代码 DRY，并且您可以在母版页中包含初始化代码而不是修改它。

想象一下，你会选择js-date-picker 类来标记类，这是你必须编写的 JS。请注意，我更喜欢简短的符号，但再一次，这取决于你：

$(function() {
    $(".js-date-picker").datepicker({
        // Options go here   
    });
});

您可以找到选项列表here。我总是觉得去看看选项很好，所以你知道默认值，而且你不会对一些你可能不想要的行为感到惊讶。

编辑：好的，再看一遍，你什么都看不到是正常的。我猜你在运行它时也会遇到 JS 错误。屏幕截图显示您有 jquery.datepick.js，它与 jQuery UI 的 datepicker 不同。我想我找到了这个插件的主页here。

如您所见，它显示插件可以通过调用.datepick() 而不是.datepicker() 来调用。 也许你可以试试。

Answer 5

/* Paste your link file here */

    <link href="../assets/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" />
    <script src="../assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>   

 /* This only work with asp.net tag */
    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%=textbox.ClientID %>").datepicker();//paste textbox id here
        });
        </script>

    /* This work with html tag */
    <script type="text/javascript">
        $(document).ready(function () {
            $("#textbox").datepicker();//paste textbox id here
        });
        </script>

Answer 6

问题是您的文本框。如果您在 html 输入中键入 - type="text" 将起作用，但在 asp.net 文本框中则不起作用。而是在 jquery 中捕获文本框的更改事件并将格式更改为“dd/mm/yy”。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(function () {
        $("#<%=datepicker.ClientID%>").datepicker();
        $("#<%=datepicker.ClientID%>").on("change", function () {
            $("#<%=datepicker.ClientID%>").datepicker("option", "dateFormat", "dd/mm/yy");
        });
    });
</script>