jQuery datepicker - Why is theme styling not showi

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

let's try with bellow For admin : -

    function eds_admin_styles() {
      wp_enqueue_style( 'jquery-ui-datepicker-style' , '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css');
    }
    add_action('admin_print_styles', 'eds_admin_styles');
    function eds_admin_scripts() {
      wp_enqueue_script( 'jquery-ui-datepicker' );
    }
    add_action('admin_enqueue_scripts', 'eds_admin_scripts');

For theme:

    function edsbootstrap_scripts() {
        wp_enqueue_style( 'jquery-ui-datepicker-style' , '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css');
        wp_enqueue_script( 'jquery-ui-datepicker' );
    }
    add_action( 'wp_enqueue_scripts', 'edsbootstrap_scripts' );

here is js

   (function($) {
      $('#jquery-datepicker').datepicker();
    }(jQuery));

Answer 3

I found the issue was coming from how my application was bundling the css files. I added links in my index page and was able to get the themes working.

<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery-ui.structure.css" rel="stylesheet" />

Answer 4

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