jQuery Clendar 是一款基于 jQuery 的日歷插件,可以輕松地在網頁中添加日歷功能,使用戶可以瀏覽、選擇特定日期或者設置日期范圍。
使用 jQuery Clendar 前,需要引入它的依賴庫:jQuery 和 moment.js。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.22.2/moment.js"></script>
<script src="jquery.clendar.min.js"></script>
jQuery Clendar 有許多配置項,可以根據需求對日歷進行自定義設置。例如:
$('.calendar').clendar({
days: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
onSelect: function(el, cell) {
console.log(moment(cell.date).format('YYYY-MM-DD'));
}
});
上面的代碼定義了日歷的一些基本設置,以及日歷中的某一日期被選中后的回調函數。
jQuery Clendar 還可以很方便地集成日期范圍選擇功能:
$('.calendar-2').clendar({
multiple: true,
range: true,
onSelect: function(el, cell) {
console.log(cell.date);
}
});
以上代碼中,我們將 multiple 和 range 配置項均設為 true,就可以實現日期范圍選擇功能。
總之,jQuery Clendar 是一款使用起來非常方便的日歷插件,可以滿足各種不同需求的日歷或日期選擇場景。