Home/ Questions/Q 7556121
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T11:47:21+00:00

This one has me pulling my hair out. I’m trying to implement a very

  • 0

This one has me pulling my hair out.

I’m trying to implement a very simple jQuery datepicker. I’m using code straight out of the example online.

I’ve finally started over with a blank page with no CSS (aside from the Redmond jquery UI theme. When I view the page, I get a blue bar below my text box:

http://gameguidesonline.com/brian/1.png

…Mousing over this bar causes a javascript error.

If I click on the date box, I get this jumbled version of the datepicker:

http://gameguidesonline.com/brian/2.png

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
        <link type="text/css" href="/JavaScript/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />    
        <script src="/JavaScript/jquery.min.js" type="text/javascript"></script>
        <script src="/JavaScript/jquery-ui.min.js" type="text/javascript"></script>
        <script src="bench.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
            <div class="demo">
                <p>Date: <input id="datepicker" type="text" /></p>
            </div>

    </form>
</body>
</html>

bench.js:

$(function () {
    $("#datepicker").datepicker();
});

Versions

jQuery v1.7.1 (also tried 1.7)
jQuery UI 1.8.16
IE 9, Firefox (latest)

I even tried a script I found that waits until onclick to bind the calendar. This gets rid of the blue bar, but still shows me a jumbled calendar.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Can you try the following code directly. The difference is I used google CDN paths to javascript. It works prefectly. I used the versions you have mentioned.

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
<!--        <link type="text/css" href="/JavaScript/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />    
-->         <link href="http://code.jquery.com/ui/1.8.16/themes/redmond/jquery-ui.css" rel="stylesheet">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
            <div class="demo">
                <p>Date: <input id="datepicker" type="text" /></p>
            </div>

    </form>
    <script src="bench.js" type="text/javascript"></script>
</body>
</html>
    • 0