簡體   English   中英

當從Jquery-UI着重於文本框時,如何調用日期選擇器函數?

[英]How to call the date picker function when focus on textbox from Jquery-UI?

當專注於文本框時,日期選擇器應出現。 該日期選擇器應具有年份選項。

這是我首先嘗試顯示日期選擇器對話框的步驟。 但是我不知道我做錯了什么。

我認為我在頭文件上犯了一個錯誤

<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)

最終,我自己找到了解決方案。

這是我的問題的答案。

<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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM