jQuery datepicker - Почему стиль темы не отображается?

Question

Я использовал jQuery для создания средства выбора даты следующим образом:

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

и

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

Устройство выбора даты работает нормально, и я использовал это несколько раз раньше.Проблема в том, что элемент input по-прежнему выглядит как обычное текстовое поле, тогда как когда я использовал его в прошлом, он использовал классы пользовательского интерфейса jQuery для стилизации поля, чтобы оно выглядело глянцевым и соответствовало теме.

Я использовал firebug, чтобы увидеть, какие ссылки были применены к элементу ввода, и он имеет только:

hasDatepicker

, тогда как поле ввода средства выбора даты на другом сайте, который оформлен правильно, имеет всеиз следующих классов:

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

Давайте попробуем с приведенным ниже. Для администратора: -

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

Для темы:

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

вот js

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

Answer 4

Я обнаружил, что проблема связана с тем, как мое приложение связывает файлы CSS. Я добавил ссылки на свою индексную страницу и смог заставить темы работать.

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