.highlighted { background-color: #99ccff; } $(‘#date’).datepicker({ startView: 0, minViewMode: 0, maxViewMode: 2, multidate: true, multidateSeparator: “-“, autoClose: true, beforeShowDay: highlightRange, }).on(“changeDate”, function(event) { var dates = event.dates, elem = $(‘#date’); if (elem.data(“selecteddates”) == dates.join(“,”)) return; if (dates.length > 2) dates = dates.splice(dates.length – 1); dates.sort(function(a, b) { return new Date(a).getTime() – new Date(b).getTime() }); elem.data(“selecteddates”, dates.join(“,”)).datepicker(‘setDates’, dates); }); function highlightRange(date) { var selectedDates = $(‘#date’).datepicker(‘getDates’); if (selectedDates.length === 2 && date >= selectedDates[0] && date <= selectedDates[1]) { return 'highlighted'; } return ''; }
注意事项
确保引入的 Bootstrap Datepicker 版本支持 multidate 选项。可以根据实际需求调整 Datepicker 的其他参数，例如日期格式、语言等。highlightRange 函数可以根据需要进行修改，例如添加不同的高亮样式或添加其他逻辑。
总结
通过以上步骤，我们可以使用 Bootstrap Datepicker 插件实现一个单日历的日期范围选择器。这种方式简洁直观，可以有效地提升用户体验。希望本文对你有所帮助。
以上就是使用 Bootstrap Datepicker 实现单日历范围选择的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518589.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
微信扫一扫
支付宝扫一扫
