javascript - Bootstrap datepicker - 在特定月份的指定日期添加工具提示
问题描述
工具提示工作正常,问题我无法仅设置特定月份的工具提示日期,
如果我将工具提示设置为当月的第 5 个日期,但工具提示在每个月的第 5 个日期添加
$('.date-header').datepicker({
autoclose: true,
beforeShowDay: function(date) {
var hilightedDays = [5,6];
if (~hilightedDays.indexOf(date.getDate()) && ( hilightedDays) ) {
return {classes: 'highlight', tooltip: 'Example Tooltip data' }
}}
}).on('show',function(e, date) {
$('td.highlight').tooltip();
});
没有输入,因为在这里我没有选择任何日期,只是将信息添加为工具顶部
<div class="calendar-block ">
<span class="date-header calendar--btn d-flex text-center align-items-center "><i class="far fa-calendar-alt"></i></span>
</div>
是否可以在单击日历按钮时添加日期选择器显示切换样式
解决方案
如果您只想将日期应用于当前月份,则可以获取该值并检查日期选择器中正在查看的月份是否等于当前月份。
像这样的东西:
$('.date-header').datepicker({
autoclose: true,
beforeShowDay: function(date) {
var hilightedDays = [5, 6];
// get current month
var currentMonth = new Date().getMonth();
// if date.getMonth() === currentMonth, then highlight the date
if (date.getMonth() === currentMonth && ~hilightedDays.indexOf(date.getDate()) && (hilightedDays)) {
return {
classes: 'highlight',
tooltip: 'Example Tooltip data'
}
}
}
})
同样,您可以使用任何月份值(例如,如果您只想在 9 月显示工具提示,只需检查月份是否 === 8;月份是从 0 开始的,因此 0 是 1 月,11 是 12 月)。
推荐阅读
- android - 房间数据库:NOT NULL 约束在删除时失败
- git - 为不同平台构建时 Ionic / Cordova 项目的源代码控制策略
- c# - 在类列表中对字符串 DateAndTime 值进行排序
- jenkins - 如何使用 jenkins 设置 gitlab 管道?
- android - 如何通过登录应用程序访问 laravel 控制器功能
- firebase - 为什么在集合项目上设置返回待处理的承诺
- javascript - ng-checked 不适用于角度 js 模板中的多个条件表达式
- javascript - 使用全新的 UI 设计转换现有的 Angular 应用程序
- python - 在最近的关键条件上加入 Spark DataFrame
- javascript - 使用 forEach 将新值推送到对象中并返回异步