日期选择器实例在jqueryui.com不起作用

剪切/在“查看源文件”的代码粘贴到您自己的新的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>

来源

2014-03-24 Scott Savage

你能清楚什么不适合你吗？ JSFiddle here：http://jsfiddle.net/JasonAller/BzM6b/1/ –

即使在他们自己的示例页面上，当您将光标放置在数据的文本区域时，也会弹出日历。在他们的示例代码中，它不会这样做。 –

你对Datepicker有什么期待？ –

尝试更换

<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

来源

2014-03-24 22:59:14 doydoy44

试过了这个直接放置，没有解决问题，也许是Doc类型或者什么？ –

I'在这个例子中，忘记'http：'，我做了更正，这对我很有用 – doydoy44

就是这样！：为我所做的改变。 –

这里补充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>

来源

2017-12-05 04:26:39

日期选择器实例在jqueryui.com不起作用

回答

相关问题