jQuery UI DatePicker: no CSS, no selection

Question

I am trying to get a jQuery UI DatePicker working. I uploaded the contents of the development-bundle folder to the folder res/jqueryui and set up two datepickers like so:

<script src="res/jquery-2.1.0.min.js"></script>
<script src="res/jqueryui/ui/minified/jquery-ui.custom.min.js"></script>
<script src="res/jqueryui/ui/minified/jquery.ui.datepicker.min.js"></script>
<link rel="stylesheet" href="res/jqueryui/themes/blitzer/minified/jquery.ui.datepicker.min.css">
<script>
    $(document).ready(function() {
        $( "#from" ).datepicker();
        $( "#to" ).datepicker();
        $( "#from" ).datepicker( "option", "dateFormat", $( this ).val() );
        $( "#to" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
</script>

If I click on one of the datepicker fields, the datepicker appears, but there are no styles. If I set the stylesheet href to http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css, the style works just fine. Why?

Another issue is that when I click on a date in the datepicker, the field value does not get updated. There are no JS errors. What might be the problem?

Note that I'm not using the jQuery file that came with the bundle (jquery-1.10.2.js), but if I use that, it makes no difference.

Gigi · Accepted Answer · 2014-03-23 09:30:33Z

1

I solved the CSS problem by re-downloading a custom jQuery UI package and uploading only the main .js file and .css file (together with images), and referring to them in the HTML source:

<script src="res/jquery-2.1.0.min.js"></script>
<script src="res/jquery-ui-1.10.4.custom.min.js"></script>
<link rel="stylesheet" href="res/jqueryui-css-blitzer/jquery-ui-1.10.4.custom.min.css">

I solved the date selection problem by specifying the correct date format rather than using $( this ).val(), which was a remnant of the date formats example. The correct code is thus:

$( "#from" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
$( "#to" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );

answered Mar 23, 2014 at 9:30

Gigi

29.7k32 gold badges117 silver badges196 bronze badges

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

Collectives™ on Stack Overflow

jQuery UI DatePicker: no CSS, no selection

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related