关于jQuery日历插件:daterangepicker
以下是一个使用 daterangepicker
插件创建日历的简单示例代码:
首先,确保你已经在你的项目中包含了 daterangepicker
的 CSS 和 JS 文件。
<!-- 在<head>中包含CSS文件 -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<!-- 在页面底部包含jQuery和JS文件 -->
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"></script>
然后,在你的 HTML 中添加一个元素来显示日历:
<input type="text" id="datepicker" />
最后,使用以下 JavaScript 代码初始化 daterangepicker
:
$(function() {
$('#datepicker').daterangepicker({
opens: 'left'
}, function(start, end, label) {
// 当选择日期范围时触发的回调函数
console.log("Start Date: " + start.format('YYYY-MM-DD'));
console.log("End Date: " + end.format('YYYY-MM-DD'));
});
});
这段代码会在页面加载完成时自动初始化一个日历控件,用户可以选择一个日期范围。选择后,会在控制台输出开始和结束日期。
评论已关闭