jQuery datepicker - 爲什麼主題樣式不顯示？

我用jQuery來製作日期選擇器，像這樣：jQuery datepicker - 爲什麼主題樣式不顯示？

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

和

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

的日期選擇器工作正常，我以前也使用過幾次。問題在於輸入元素仍然看起來像一個普通的文本字段，而當我過去使用它時，它使用jQuery UI類來對字段進行樣式設置，使其看起來有光澤並與主題保持一致。

我已經使用螢火以查看哪些clesses已經施加到所述輸入元件，並且它僅具有：

hasDatepicker

而被正確地風格具有所有其他網站上的日期選擇器的輸入欄以下類：

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

我看了一下日期選擇器的文檔，但我看不到，可以讓你選擇加入或退出這個造型，我本來認爲這在默認情況下仍會發生的選項。

任何人都可以告訴我我需要做什麼來啓用這個功能嗎？

非常感謝。

更新：

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

這是從活動站點輸入標記的要求。

來源

2011-08-22 Joe

確保你已經包括CSS中那你的頁面 –

好吧，你總是可以[自己添加這些類]（http://jsfiddle.net/gothick/WHeEy/）。我們可以在工作現場看到「輸入」的來源嗎？ –

@Matt你好。我已經對我的帖子進行了編輯，以顯示來自現場的實際「輸入」。 – Joe

您是否在主題樣式表中鏈接？

例子：

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

來源

2011-08-22 13:41:34 jim31415

我不小心使用了媒體=「屏幕」，這阻止了風格被應用？奇怪的！切換到媒體=「全部」按預期應用樣式。謝謝！ – James

在我看來，你指出的是從jQuery的UI庫除了應用CSS樣式輸入字段的網站，我的意思是，在不樣式表屬於jquery-ui。在這jsfiddle http://jsfiddle.net/diosney/PkEar/3/你可以看到，這些類不適用於jquery-ui datepicker（）本身（我使用的是jquery 1.6.2和jquery-ui 1.8.14）。

來源

2011-08-22 16:48:48 diosney

我發現問題來自我的應用程序如何捆綁CSS文件。我在我的索引頁面添加了鏈接，並能夠使主題工作。

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

來源

2016-03-08 05:53:39

讓我們用波紋管嘗試有關管理： -

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

來源

2017-01-18 18:47:32

jQuery datepicker - 爲什麼主題樣式不顯示？

回答

相關問題