Change width of jquery ui-datepicker using jquery

Question

I'm trying to change the width of the jquery calender.ui-datepicker using jquery.

I currently have this:

<script language="javascript" type="text/javascript">
$(function(){
$('head').append('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>');         
$(".date").datepicker({ changeYear: true,  yearRange: '1900:2050',
changeMonth: true, dateFormat: 'yy-mm-dd'});
$(".ui-datepicker").css("width", "14em");
$(".ui-widget").css("fontSize", "0.9em");
});
</script>

Everything works fine except for the:

$(".ui-datepicker").css("width", "14em");

This does not seem to be parsing correctly for some reason. However, when I add that line to the console in firebug it works perfectly.

Does anyone know what the issue may be?

Edit: It seems that there is an onClick event in the jquery ui that is firing and overwriting by.css() method. It seems using a style tag is the fastest and easiest solution at this point. I don't see another alternative

Answer 1

Just add a class that has width: 14em !important

You should not be styling via javascript anyway, create a class and add that class.