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.

Answer 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' );