Question

我使用jQuery来制作像这样的日期选择器：

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

和

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

datepicker工作正常，之前我曾多次使用过它。问题是输入元素仍然看起来像普通的文本字段，而当我过去使用它时，它使用了jQuery UI类来设置字段的样式，使其看起来很有光泽并与主题保持一致。

我使用了firebug来查看哪些clesses已应用于input元素，它只有：

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

我发现问题来自我的应用程序捆绑css文件的方式。我在索引页面中添加了链接，并且能够使主题正常运行。

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

Answer 4

让我们试试吼叫吧对于管理员： -

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

jQuery datepicker - 为什么主题样式没有显示？

4 个答案: