jQuery datepicker - Tại sao kiểu dáng chủ đề không hiển thị?

Question

Tôi đã sử dụng jQuery để tạo ra một datepicker như vậy:

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

và

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

Các datepicker đang làm việc tốt và tôi đã sử dụng điều này nhiều lần trước đó. Vấn đề là phần tử đầu vào vẫn trông giống như một trường văn bản bình thường, trong khi khi tôi đã sử dụng nó trong quá khứ, nó đã sử dụng các lớp UI của jQuery để tạo kiểu cho trường trông bóng loáng và phù hợp với chủ đề.

Tôi đã sử dụng firebug để xem clesses đã được áp dụng cho các yếu tố đầu vào, và nó chỉ có:

hasDatepicker 

trong khi một lĩnh vực đầu vào của một datepicker trên một trang web khác mà là theo kiểu một cách chính xác có tất cả các lớp học sau:

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

tôi đã xem xét các tài liệu datepicker, nhưng tôi không thể nhìn thấy một tùy chọn cho phép bạn chọn tham gia hoặc ra khỏi phong cách này và tôi đã có thể nghĩ rằng điều này xảy ra theo mặc định anyway.

Ai có thể cho tôi biết tôi cần làm gì để kích hoạt tính năng này không?

Rất cám ơn.

Cập nhật:

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

Đây là đánh dấu đầu vào từ các trang web hoạt động theo yêu cầu.

Answer 1

Bạn có đang liên kết trong biểu định kiểu chủ đề không?

Ví dụ:

<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

Dường như với tôi rằng trang web mà bạn chỉ ra được áp dụng phong cách css đến lĩnh vực đầu vào ngoài các thư viện jquery-ui, ý tôi là, trong một kiểu mà không làm thuộc về jquery-ui.

Trong jsfiddle http://jsfiddle.net/diosney/PkEar/3/ bạn có thể thấy rằng các lớp này không được áp dụng bởi jquery-ui datepicker() chính nó (tôi đang sử dụng jquery 1.6.2 và jquery-ui 1.8.14).

Answer 3

Tôi phát hiện thấy sự cố đến từ cách ứng dụng của tôi đã được nhóm các tệp css. Tôi đã thêm các liên kết trong trang chỉ mục của mình và có thể làm cho các chủ đề hoạt động.

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

Answer 4

hãy thử với dưới Đối với 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'); 

Đối với chủ đề:

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

đây là js

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