首页web点击弹出日历框并显示当前选择的时间

web点击弹出日历框并显示当前选择的时间

时间: 2024-11-10 19:25:19 浏览: 3

Web页面上通常通过JavaScript库来实现在用户点击某个元素时弹出日历选择框的功能。常用的库有Bootstrap Datepicker、jQuery UI DatePicker等。下面是一个简单的例子，演示如何使用jQuery UI： ```html <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> </head> <body> <button id="datePickerButton">选择日期</button> <script> $(document).ready(function() { $("#datePickerButton").click(function() { $("#calendar").datepicker({ defaultDate: new Date() // 显示当前日期 }); }); }); </script> <div id="calendar"></div>  </body> </html> ``` 在这个示例中，当用户点击id为"datePickerButton"的按钮时，会在id为"calendar"的元素处弹出一个日历选择框，并默认显示当前日期。记得替换链接中的库版本以匹配你的项目。

阅读全文