解决 bootstrap datepicker没有左右箭头

本文将解决 bootstrap datepicker 没有左右箭头,不能选择上一月、下一月。

项目使用 bootstrap 的 datepicker 日期插件,但是在 bootstrap3 下面 datepicker 没有上月、下月的箭头。如下图:

解决 bootstrap datepicker没有左右箭头

我的 bootstrap 版本信息如下:

/*!
 * Bootstrap v3.3.4 (https://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

通过浏览器调试工具查看了出现箭头的元素,该元素使用了 bootstrap 的字体图标库。元素如下:

<th class="prev" style="visibility: visible;">
    <span class="glyphicon icon-arrow-left"></span>
</th>

其中:icon-arrow-left 就是左箭头的 class 样式。然后根据这个样式到 datepicker 的 js 源码查找,找到如下代码:

this.icons = {
      leftArrow: this.fontAwesome ? 'fa-arrow-left' : (this.bootcssVer === 3 ? 'glyphicon-arrow-left' : 'icon-arrow-left'),
      rightArrow: this.fontAwesome ? 'fa-arrow-right' : (this.bootcssVer === 3 ? 'glyphicon-arrow-right' : 'icon-arrow-right')
    }

这段代码明显是根据 this.bootcssVer 即 bootstrap 的版本来动态决定使用样式。既然我使用的是 bootstrap3,则设置 bootcssVer 为 3 即可。

修改后的代码如下:

$('#export_end_date').datetimepicker({
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    startView: 2,
    minView: 2,
    forceParse: 0,
    bootcssVer: 3
});

最终效果图如下:

解决 bootstrap datepicker没有左右箭头

一知半解的人,多不谦虚;见多识广有本领的人,一定谦虚。——谢觉哉
0 不喜欢
说说我的看法 -
全部评论(
没有评论
关于
本网站专注于 Java、数据库(MySQL、Oracle)、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章,助力技术传播与交流。无论是技术新手渴望入门,还是资深开发者寻求进阶,这里都能为您提供深度见解与实用经验,让复杂编码变得轻松易懂,携手共赴技术提升新高度。如有侵权,请来信告知:hxstrive@outlook.com
公众号