首页用jQuery日期控件做一个日期输入

用jQuery日期控件做一个日期输入

时间: 2024-03-07 09:47:52 浏览: 14

好的，我可以为您提供一段使用jQuery日期控件的代码：首先，您需要在HTML文件中引入jQuery以及jQuery日期控件的js和css文件。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>日期控件示例</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> </head> <body> <label for="datepicker">选择日期:</label> <input type="text" id="datepicker"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> $(function () { $("#datepicker").datepicker(); }); </script> </body> </html> ``` 代码解释： - 我们在HTML中创建了一个`input`元素，并设置了`id`为`datepicker`。 - 在引入jQuery和jQuery日期控件的js和css文件后，我们在`script`标签中使用了`$(function(){})`，这是jQuery的快捷方式，表示在页面加载完成后执行函数内的代码。 - 我们在函数内使用了`$("#datepicker").datepicker()`，这是jQuery日期控件的初始化方法，它会将`input`元素转换为日期控件。现在您可以在页面上看到一个日期控件，当您点击输入框时，它会弹出一个日历供您选择日期。