jQuery UI Datepicker displaying incorrectly

Question

I'm trying to add a form to a web page containing an input that is to display the jQuery UI datepicker widget once a user has clicked on the input just as it does on the jQuery UI Site.

I have followed the steps outlined in the demo but when i load the page the calander is displaying full width dow the bottom of the page inbetween the closing footer tag and the closing body tag.

I can get it to work inside JS fiddle but cannot recreate in on my web page.

I am referencing the following scripts in the head of my document

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

Anyone have any ideas? Thanks

common mistake <link rel="stylesheet" src="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/> — Praveen
– Praveen, Commented Nov 6, 2013 at 14:00
Yeah I have the css referenced <link rel="stylesheet" href="code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> — psycho
– psycho, Commented Nov 6, 2013 at 14:05

Praveen · Accepted Answer · 2013-11-06 14:07:04Z

1

Not sure whether without seeing the full code. Even without jQuery UI Stylesheet it should have worked.

Here I have given full working code

<html>    
    <head>
        <!--START CHOOSE DATE-->
        <link rel="stylesheet" type="text/css" 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>
            $(function() {
                $('.date_select').datepicker();
            });
        </script>
    </head>    
    <body>
        <p class="date_picker">
            <label for="date_input" class="select">Date:</label>
            <input type="text" name="date_input" id="date_input" class="date_select" />
        </p>
        <!--END CHOOSE DATE-->
    </body>
</html>

JSFiddle

answered Nov 6, 2013 at 14:07

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

psycho Over a year ago

Its basically popping up at the very bottom of the page full width as opposed to a dropdown from the input itself

Praveen Over a year ago

@psycho that what I have said in my answer, that make use of my code in a separate file and try whether it is working locally

psycho · Accepted Answer · 2013-11-06 14:33:05Z

0

It was a simple case of one of my closing tags not being correct. I put the markup through the W3C validator and it helped me spot the problem.

Thank you for all your help.

answered Nov 6, 2013 at 14:33

psycho

1,6514 gold badges21 silver badges39 bronze badges

Comments

hgolov · Accepted Answer · 2016-10-05 10:49:04Z

0

If anyone runs into this - another solution.

Make sure that there is not too much text for the space.

In my case I was setting the days of the week to longer words and it forced the table width to overflow.

answered Oct 5, 2016 at 10:49

hgolov

7221 gold badge12 silver badges29 bronze badges

Collectives™ on Stack Overflow

jQuery UI Datepicker displaying incorrectly

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related