Bootstrap 日期选择器在日期上显示弹出窗口
Bootstrap Datepicker show popover on dates
当用户点击输入字段时,我已成功添加 bootstrap 日期选择器。我想在鼠标悬停在 bootstrap 日期选择器上时显示一些特定数据,因为可以使用 airbnb 吗?
编辑
html
<input type="text" name="start_date" id="date-from" placeholder="Check-in">
js
$(document).ready(function(){
//Date Pickers - Main Page
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#date-from').datepicker({
format: 'dd/mm/yyyy',
startDate: '+1d',
weekStart: 1,
beforeShowDay: function (date) {
return date.valueOf() >= now.valueOf();
},
autoclose: true
}).on('changeDate', function (ev) {
});
});
这是我已更新以显示弹出窗口的 JSFiddle。
https://jsfiddle.net/mr3dxj5p/4/
$('body').on({
mouseenter: function() {
$(this).popover({
content: '$' + parseInt($(this).text()) * 100,
placement: 'top',
container: '.datepicker',
title: 'Price'
}).popover('show');
},
mouseleave: function() {
$(this).popover('hide')
}
}, '.datepicker .day:not(.disabled)');
当用户点击输入字段时,我已成功添加 bootstrap 日期选择器。我想在鼠标悬停在 bootstrap 日期选择器上时显示一些特定数据,因为可以使用 airbnb 吗?
编辑
html
<input type="text" name="start_date" id="date-from" placeholder="Check-in">
js
$(document).ready(function(){
//Date Pickers - Main Page
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#date-from').datepicker({
format: 'dd/mm/yyyy',
startDate: '+1d',
weekStart: 1,
beforeShowDay: function (date) {
return date.valueOf() >= now.valueOf();
},
autoclose: true
}).on('changeDate', function (ev) {
});
});
这是我已更新以显示弹出窗口的 JSFiddle。
https://jsfiddle.net/mr3dxj5p/4/
$('body').on({
mouseenter: function() {
$(this).popover({
content: '$' + parseInt($(this).text()) * 100,
placement: 'top',
container: '.datepicker',
title: 'Price'
}).popover('show');
},
mouseleave: function() {
$(this).popover('hide')
}
}, '.datepicker .day:not(.disabled)');