2014-03-24 72 views
1

試試這個:日期選擇器實例在jqueryui.com不起作用

導航到:http://jqueryui.com/datepicker/

剪切/在「查看源文件」的代碼粘貼到您自己的新的HTML頁面,看看它的實際工作。

在Chrome和Firefox中試過這個。

一兩件事我注意到的是,他們不裹功能 '$(文件)。就緒(函數()'

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Datepicker - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 
    $(function() { 
    $("#datepicker").datepicker(); 
    }); 
    </script> 
</head> 
<body> 

<p>Date: <input type="text" id="datepicker"></p> 

</body> 
</html> 
+0

你能清楚什麼不適合你嗎? JSFiddle here:http://jsfiddle.net/JasonAller/BzM6b/1/ –

+0

即使在他們自己的示例頁面上,當您將光標放置在數據的文本區域時,也會彈出日曆。 在他們的示例代碼中,它不會這樣做。 –

+0

你對Datepicker有什麼期待? –

回答

2

嘗試更換

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

通過

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 

正如Jason Aller在評論中所言:

他們在開始時使用//而不是http://的原因是 ,因此它將與協議無關,並且可以使用https連接。 它避免了混合內容的安全警告,但休息時 協議文件://賈森 - 阿列爾


所以之前//code.jquery.com

+0

試過了這個直接放置,沒有解決問題,也許是Doc類型或者什麼? –

+0

I'在這個例子中,忘記'http:',我做了更正,這對我很有用 – doydoy44

+0

就是這樣! :爲我所做的改變。 –

0

這裏補充http:是我的解決方案:

$(document).ready(function() { 
 
    var userLang = navigator.language || navigator.userLanguage; 
 

 
    var options = $.extend({}, 
 
    $.datepicker.regional["ja"], { 
 
     dateFormat: "yy/mm/dd", 
 
     changeMonth: true, 
 
     changeYear: true, 
 
     highlightWeek: true 
 
    } 
 
); 
 

 
    $("#japaneseCalendar").datepicker(options); 
 
});
#ui-datepicker-div { 
 
    font-size: 14px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" 
 
      href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script> 
 
</head> 
 
<body> 
 
<h3>Japanese JQuery UI Datepicker</h3> 
 
<input type="text" id="japaneseCalendar"/> 
 

 
</body> 
 
</html>