按钮单击时未填充 Jquery Datepicker？答案

【问题标题】：Jquery Datepicker is not populated on Button click?按钮单击时未填充 Jquery Datepicker？
【发布时间】：2011-08-24 10:21:52
【问题描述】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link >
   <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
   <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
   <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>
<body>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            var textBox = $('#mdatepicker');
            var icon = $('#myButton');
            var mydatepicker = textBox.datepicker();

            icon.click(function () {
                mydatepicker.datepicker("show");
            });

        });
    </script>;

    <form id="form1" runat="server">
            <input type="text" id="mdatepicker"  value="date" />
            <input type="button" id="myButton"   value="PopUp"/>
    </form>
</body>
</html>

这个 html sn-p 有什么遗漏吗？？

datepicker 没有被填充，ErrorConsole 显示错误 -

'textBox.datepicker is not a function'

在下面的代码中；

var mydatepicker = var mydatepicker = textBox.datepicker();

有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery asp.net datepicker

【解决方案1】：

这是你的代码的工作副本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

</head>
<body>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        var textBox = $('#mdatepicker');
        var icon = $('#myButton');
        var mydatepicker = textBox.datepicker();

        icon.click(function () {
            mydatepicker.datepicker("show");
        });

    });
</script>;

<form id="form1" runat="server">
        <input type="text" id="mdatepicker"  value="date" />
        <input type="button" id="myButton"   value="PopUp"/>
</form>

【讨论】：

所以我错过了第二次提到的脚本仪式..？
还有一个问题..我可以从哪里找到 CSS 。？？
您可以自己设置选择器的样式。它有一个可以使用的类：ui-datepicker-calendar

【解决方案2】：

datepicker 不是 jQuery-UI 库中的函数吗？

如果是这样，那么您需要包含对jQuery-UI 库的脚本引用。

编辑

否，您需要添加对 jQuery-UI 库和 jQuery-UI Css 文件的脚本引用

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="src of desired theme" />

【讨论】：

ui 包含在这个文件中.. "Scripts/jquery-1.4.1.js"
更新了答案。 jquery-1.4.1.js 是不够的。你还需要 jQuery-ui 库
那么 jquery-1.4.1.min.js 和 vsdoc 文件是干什么用的？？
jquery-1.4.1.min 是核心 jQuery 库。 vsdoc 用于 Visual Studio 智能感知。

【解决方案3】：

您是否对 js 文件进行了完整的引用。包括 jquery 和 datepicker 的 .js 文件。

问题在于：

   <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
   <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
   <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

我在你包含所有 js 引用的 head 标签中看不到任何关于 datepicker 的 js 文件。

必须有一些文件，例如：

<script type="text/javascript" src="Scripts/datepicker.js"></script>

或类似的东西，你缺少包括在内。

希望这会有所帮助。

【讨论】：

你能给我一个链接，我可以参考这个 datepicker.js 文件吗？？请..!!!
你从网上下载的包里没有吗？

【解决方案4】：

如果你使用jquery datepicker，'myButton'对象不是必须的，datepicker会处理它以供使用，见代码：

<html>
<head><title>jQuery Open on button</title>
<link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />

</head>
<body>
<form>
    <input id="date" type="textbox"/>
</form>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("#date").datepicker({ showOn: 'button', buttonText: "select" });
        });
    </script>

</body>
</html>

【讨论】：