Question

<!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片段中是否有任何遗漏。??

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

'textBox.datepicker is not a function'

在下面的代码中;

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

有人可以帮忙吗。？

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

Answer 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" />

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

我在头标记中看不到任何关于datepicker的js文件，其中包含了所有js引用。

必须有一些文件：

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

或类似的东西，你不想包含它。

希望这有帮助。

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

单击按钮时是否未填充Jquery Datepicker？

4 个答案: