Question

当关注文本框时，应显示日期选择器。该日期选择器应该有年份选项。

这是我首先尝试显示日期选择器对话框的内容。但我不知道我做错了什么。

我认为我在头文件上犯了一个错误

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="js/jquery-3.1.1.js"></script>
        <script src="js/bootstrap.js"></script>
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/jquery-ui.css" rel="stylesheet" />
        <script src="js/jquery-ui.js"></script>
    </head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtDateFrom" CssClass="form-control" runat="server" Width="200px"></asp:TextBox>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#datepick").datepicker({
                    dateFormat: "dd-mm-yyyy"
                });
                $("#txtDateFrom").focus(function () {
                    $("#txtDateFrom").datepicker("show");
                });
                $("#txtDateFrom").focus();
            });
        </script>
    </div>
    </form>
</body>

我也希望显示年份选项。

我看到了Jfiddle。但我不知道为什么它在我的情况下不起作用。

更新

错误消息

 Uncaught TypeError: Cannot read property 'settings' of undefined
 at Datepicker._get (jquery-ui.js:8633)
 at Datepicker._showDatepicker (jquery-ui.js:7910)
 at HTMLInputElement.<anonymous> (jquery-ui.js:9256)
 at Function.each (jquery-3.1.1.js:368)
 at jQuery.fn.init.each (jquery-3.1.1.js:157)
 at jQuery.fn.init.$.fn.datepicker (jquery-ui.js:9253)
 at HTMLInputElement.<anonymous> (test.aspx:36)
 at HTMLInputElement.dispatch (jquery-3.1.1.js:5202)
 at HTMLInputElement.elemData.handle (jquery-3.1.1.js:5010)
 at HTMLInputElement.trigger (jquery-3.1.1.js:5325)

Answer 1

最后我自己找到了解决方案。

这是我的问题的答案。

<asp:TextBox ID="txtDateFrom" CssClass="form-control" runat="server" Width="200px"></asp:TextBox>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#txtDateFrom").datepicker({
                    dateFormat: "dd-mm-yy",
                    changeYear: true,
                    changeMonth:true
                });
                $("#txtDateFrom").focus(function () {
                    $("#datepick").datepicker("show");
                });
                $("#txtDateFrom").focus();
            });
        </script>

如何在关注Jquery-UI的文本框时调用日期选择器功能？

1 个答案: