1

嗨，我看到了有关使用图像创建日期选择器的教程。我已经复制并粘贴了确切的代码（图像路径除外），但日历图像没有显示。谁能帮助我.. :D

这是代码

   <HTML>
<HEAD>

<style type="text/css">
body
{
    font-size: 10pt;
}

</style>


<script type="text/javascript"> 

$(document).ready(function() {

    $("#txtDate").datepicker({
        showOn: 'button',
        buttonText: 'Show Date',
        buttonImageOnly: true,
        buttonImage: 'calendar.jpg',
        dateFormat: 'dd/mm/yy',
        constrainInput: true
    });

    $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
    });

});

</script>


</HEAD>
<BODY>
<input type='text' id='txtDate' />

</BODY>
</HTML>
4

3 回答 3

4

您需要同时包含 jQuery 和 jQuery UI 库才能使其工作

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

前任：

<HTML>
    <HEAD>
        <style type="text/css">
            body {
                font-size: 10pt;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>        

        <script type="text/javascript"> 

            $(document).ready(function() {

                $("#txtDate").datepicker({
                    showOn: 'button',
                    buttonText: 'Show Date',
                    buttonImageOnly: true,
                    buttonImage: 'calendar.jpg',
                    dateFormat: 'dd/mm/yy',
                    constrainInput: true
                });

                $(".ui-datepicker-trigger").mouseover(function() {
                    $(this).css('cursor', 'pointer');
                });

            });

        </script>


    </HEAD>
    <BODY>
        <input type='text' id='txtDate' />

    </BODY>
<HTML>

演示：Plunker

于 2013-07-12T03:27:08.243 回答
0

像这样添加 JQuery 库和 ui：

<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.10.3.custom.min.js"></script>
于 2013-07-12T03:24:50.730 回答
0

您必须包含 jQuery UI 路径

完整的工作代码在这里

<HTML>
<HEAD>

<style type="text/css">
body
{
    font-size: 10pt;
}

</style>

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript"> 

$(document).ready(function() {

    $("#txtDate").datepicker({
        showOn: 'button',
        buttonText: 'Show Date',
        buttonImageOnly: true,
        buttonImage: 'calendar.jpg',
        dateFormat: 'dd/mm/yy',
        constrainInput: true
    });

    $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
    });

});

</script>
<head>
<body>

<input type="text" id="txtDate"  />

</body>
于 2013-07-12T03:42:45.393 回答