JQuery datepicker - Why theme styling is not displayed?

Question

I used jQuery to make datepicker as follows:

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

and

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

The datpicker is working fine, and I used this several times before. The problem is that the input element still looks like a normal text field, whereas when I used it in the past, it used jQuery's user interface classes to style the field so that it looked glossy and consistent with the theme.

I used firebug to see which fangs were applied to the input element, and it only has:

hasDatepicker

whereas the input field of the date picker on another site, which is written correctly, has all of the following classes:

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

datepicker, , , , -.

- , , ?

.

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

.

Answer 1

?

:

<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

, , , css , jquery-ui, , , jquery-ui.

jsfiddle http://jsfiddle.net/diosney/PkEar/3/ , jquery-ui datepicker() ( jquery 1.6.2 jquery-ui 1.8.14).

Answer 3

I realized that the problem was with the way my application linked css files. I added links on my index page and was able to get themes to work.

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

Answer 4

try with a roar For the administrator: -

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

Subject:

    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 js

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