jQuery datepicker - Why is theme styling not showing?

Question

I've used jQuery to make a datepicker like so:

<input type="text" id="my_datepicker">

and

$('#my_datepicker').datepicker();

The datepicker is working fine and I have used this several times before. The issue is that the input element still looks like a normal text field, whereas when I have used this in the past, it has used jQuery UI classes to style the field so that it looks glossy and in keeping with the theme.

I have used firebug to see which clesses have been applied to the input element, and it only has:

hasDatepicker

whereas a the input field of a datepicker on another site that is styled correctly has all of the following classes:

hasDatepicker
ui-inputfield
ui-widget 
ui-state-default
ui-corner-all

I've looked at the datepicker docs, but I can't see an option that lets you opt in or out of this styling and I would have thought that this happen by default anyway.

Can anyone show me what I need to do to enable this?

Many thanks.

Update:

<input id="dob" type="text" maxlength="45" size="45" />

This is the input markup from the live site as requested.

Answer 1

Are you linking in the theme stylesheet?

Example:

<link rel="stylesheet" type="text/css" media="all"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css"    />

Answer 2

Seems to me that the site that you point out is applying the css styles to the input field apart from the jquery-ui library, I mean, in a stylesheet that don't belongs to jquery-ui.

In this jsfiddle http://jsfiddle.net/diosney/PkEar/3/ you can see that these classes are not applied by jquery-ui datepicker() itself (I'm using jquery 1.6.2 and jquery-ui 1.8.14).