要实现在日历单击时仅激活一个Bootstrap 4日期选择器,可以使用以下步骤:
<input type="text" id="datepicker" class="form-control" readonly>
e.stopPropagation()
方法来阻止事件冒泡,以确保只有当前日期选择器被激活。例如:$(document).ready(function() {
$('#datepicker').datepicker({
autoclose: true,
todayHighlight: true
}).on('show', function(e) {
$('.datepicker').not($(this).siblings()).datepicker('hide');
}).on('click', function(e) {
e.stopPropagation();
});
});
解释上述代码:
$('#datepicker').datepicker()
用于初始化日期选择器,并设置一些选项,如autoclose
和todayHighlight
。.on('show', function(e) { ... })
用于在日期选择器显示时执行的操作。其中,$('.datepicker').not($(this).siblings()).datepicker('hide')
用于隐藏其他日期选择器。.on('click', function(e) { ... })
用于在日期选择器单击时执行的操作。其中,e.stopPropagation()
用于阻止事件冒泡。这样,当单击日期选择器时,只有当前的日期选择器会被激活,其他日期选择器将被隐藏起来。
请注意,以上代码中使用了jQuery和Bootstrap的相关功能。如果您尚未引入jQuery和Bootstrap的文件,请确保在代码中添加相应的引用。
推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云云数据库MySQL。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云