首页帮我写个带有日历插件的html

帮我写个带有日历插件的html

时间: 2023-12-21 08:05:28 浏览: 33

<!DOCTYPE html> <html> <head> <title>日历插件示例</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> </head> <body> <h1>日历插件示例</h1> <input type="text" name="daterange" value="01/01/2022 - 01/15/2022" /> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> <script type="text/javascript"> $(function() { $('input[name="daterange"]').daterangepicker({ opens: 'left' }, function(start, end, label) { console.log("选择了一个新的日期范围: " + start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD') + ' (' + label + ')'); }); }); </script> </body> </html> 注：本示例采用了开源日历插件daterangepicker，请确保在使用前已正确引用。