如何在引导日期选择器中突出显示特定日期?

2024-04-17

我正在使用引导日期选择器。我需要突出显示一些随机日期。

例如:

我需要突出显示 1、3、8、20、21、16、26、30 等日期。您能告诉我如何在引导日期选择器中突出显示这些随机日期吗?


根据 Amphetamachine 的建议在 bootstrap-datepicker 上突出显示某些日期 https://stackoverflow.com/questions/22514772/highlight-certain-dates-on-bootstrap-datepicker提供了解决此问题所需的大部分内容。该问题的答案可以改编为以下内容

$('.inline_date').datepicker({
    multidate: true,
    todayHighlight: true,
    minDate: 0,
    beforeShowDay: function(date) {
       var hilightedDays = [1,3,8,20,21,16,26,30];
       if (~hilightedDays.indexOf(date.getDate())) {
          return {classes: 'highlight', tooltip: 'Title'};
       }
    }
});

上面的代码会将突出显示样式类应用于每月列出的日期,通过进一步检查,您可以将其限制为特定月份。一些旧的浏览器可能不支持indexOf,在这种情况下你可以使用JS库或扩展if。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在引导日期选择器中突出显示特定日期? 的相关文章

  • 如何在 data-disable-with 上设置 html 到 Rails Submit_tag

    我有一个使用 bootstrap 的 RoR 应用程序 我正在尝试将 fontawesome html 图标标签应用于 Submit tag 帮助程序 但它似乎不受支持 当我单击 提交 时 禁用内容仅显示为字符串 而不是解释为 html 尽
  • Angular 2 Bootstrap 模态

    我正在尝试将 Bootstrap Modal 对话框包装在 Angular 2 组件 指令 虽然运气不太好 我看过https github com shlomiassaf angular2 modal https github com sh
  • 如何在 Laravel 5.4 中使用 bootstrap 4?

    我在我的 laravel 应用程序上使用 npm 安装了 bootstrap 4 但我认为 bootstrap 3 的工作落后于 bootstrap 4 使用命令 npm install npm install email protecte
  • Android 上的 Chrome 强制隐藏地址栏

    我最近开发了一个获取混合 http https 内容的网站 因此 我总是将地址栏显示在顶部 它不会像其他网站那样自动隐藏 这就是我要说的 This https planetkde org 是网站的链接 内容是从各种来源获取的 因此无法过滤非
  • 根据屏幕尺寸更改图像 src

    我正在尝试使用媒体查询根据屏幕尺寸更改图像 src 我尝试过背景 url x 但它不起作用 我在某处读到我应该使用 content url x 代替 但是当我这样做时 我得到一个空白页面 谁能告诉我我的代码有什么问题吗 HTML div c
  • SmartyStreets jQuery 元素定位中断

    我的地址表单位于 Twitter 引导选项卡集下方 这些标签具有不同的高度 当用户在选项卡之间切换时 SmartyStreets smarty ui 元素不会更新其绝对定位 相反 表单现在可能在页面上显示更高或更低 并且复选框保留在原来的位
  • 带圆角边框的 Div

    我不明白获得 div 的更大圆角底部边框的公式 以及是否有更简单的方法在 Bootstrap 中实现它 现在是这样的 以及我想如何开发它 header background color blue height 40px width 90px
  • 带有右侧固定侧边栏的 Bootstrap 响应式网格

    我想创建一个带有类似引导程序的模板 它尊重网格的响应系统 在图中 导航栏和右侧 包含两个按钮 是粘性的 始终显示在视图上 我的问题是右侧 因为在引导网格系统中 右侧块将被视为单行 而主要内容包含多行 我怎样才能做到这一点 围绕整个 Boot
  • 允许点击 twitter bootstrap 下拉切换链接吗?

    我们已经设置了 Twitter 引导下拉菜单以在悬停时工作 而不是单击 是的 我们知道触摸设备上没有悬停 但我们希望当我们单击主链接时能够使其正常工作 默认情况下 twitter bootstrap 会阻止它 那么我们如何重新启用它呢 只需
  • 如何翻转 Twitter Bootstrap 的工具提示

    我正在使用 Twitter 的 Bootstrap 来实现工具提示 目前 工具提示显示在链接上方 我希望工具提示出现在链接下方 我该怎么做呢 我正在触发工具提示 它明确指出 底部 但它不想为我工作 tooltip tooltip place
  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备?

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g
  • 使 Bootstrap Popover 在悬停而不是单击时出现/消失

    我正在使用 Bootstrap 构建一个网站Popover http twitter github com bootstrap javascript html popovers我不知道如何使弹出窗口出现在悬停而不是单击时 我想做的就是当有人
  • 使用日期字符串数组在引导日期选择器中设置禁用月份不起作用

    我有一个日期选择器 其配置如下 HTML div class input group date div
  • 如何在 Bootstrap 3 的导航栏中添加带有图标的搜索框?

    我正在使用新的 Twitter Bootstrap 3 并尝试放置一个像这样的搜索框 如下 在顶部导航栏中 在 Bootstrap 2 中 可以这样完成
  • 如何更改 Angular ui Bootstrap 日期选择器弹出窗口的大小?

    这就是我所指的 http angular ui github io bootstrap http angular ui github io bootstrap 我没有看到任何指示如何控制大小的内容 我尝试更改正文字体 但没有成功 可以通过覆
  • 当按钮处于加载状态时,如何向按钮添加微调器图标?

    Twitter 引导按钮 http getbootstrap com javascript buttons有一个很好的Loading 状态可用 问题是它只显示一条消息 例如Loading 通过了data loading text像这样的属性
  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是
  • 您可以将现有的 div 复制到模式对话框吗

    我有一个带有多个面板的仪表板来显示不同的信息 我希望能够添加一个按钮来以模式显示面板 我正在使用引导程序 我所能找到的只是已经编写的模态 我想复制作为面板的 div 标签的内容 然后将其显示在模型中 但我不确定如何进行 该面板的 html
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch
  • 通过纱线安装 bootstrap 的 Rails 找不到字体

    我有一个带 Bootstrap 的 Rails 5 应用程序 我用纱线安装了它 我做了以下事情 yarn add bootstrap bootstrap 3 3 7 version 3 3 7 resolved https registry

随机推荐