jQuery UI 基础知识：如何使用日期选择器小部件？

Question

这是我第一次使用 html 和 JS 所以请温柔。

我想使用 jQuery UI 中的日期选择器小部件，如 Getting Started 页面所示。

我想我在链接 html 和 JS 文件时犯了一些错误。这就是我所拥有的：

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <input type="text" name="date" id="date">
</body>
</html>

（我已经按照说明在本地下载了jquery个文件。）

和

index.js

$( "#date" ).datepicker();

但是当我在网络浏览器中打开 index.html 并单击文本框时，我没有看到“入门”页面上显示的日历日期选择器弹出窗口。

请告诉我哪里做错了。这是我第一次尝试 Html/JS 东西，我真的很沮丧。

Answer 1

您的日期选择器代码应该如下所示

$(document).ready(function(){ 
      $( "#date" ).datepicker(); 
});

您必须将此代码放入 index.js 文件中。如果您的其他文件位置正确，那么应该 work.It 始终建议将使用 DOM 元素的所有 jquery 相关代码放入 $(document).ready() 中，这样代码一旦 DOM 准备就绪并且所有元素都可用，就会执行。

jQuery UI 基础知识：如何使用日期选择器小部件？

jQuery UI Basics: How to use date picker widget?

html

javascript

jquery

jquery-ui

jquery-ui-datepicker