当前位置: 首页 > 知识库问答 >
问题:

引导图示符日期时间选择器更改图标

时浩波
2023-03-14

我使用Bootstrap datetimepickerhttps://eonasdan.github.io/bootstrap-datetimepicker/

正如文档中提到的,我能够使用下面的代码成功地更改向上和向下箭头。

$('#datetimepicker7').datetimepicker({
    sideBySide: true,
    icons: {
        up: "fa fa-chevron-circle-up",
        down: "fa fa-chevron-circle-down",
    }
});

我可以知道如何更改日历的左右图标吗?为了便于理解,我在下图中突出显示了要更改的图标。

任何帮助将高度赞赏。

共有2个答案

蒋英博
2023-03-14

您只需在配置中的图标对象中插入previousnext键,如文档中所述。

$('#datetimepicker7').datetimepicker({
    sideBySide: true,
    icons: {
        up: "fa fa-chevron-circle-up",
        down: "fa fa-chevron-circle-down",
        next: 'fa fa-chevron-circle-right',
        previous: 'fa fa-chevron-circle-left'
    }
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group">
  <div class="input-group date" id="datetimepicker7">
    <input type="text" class="form-control" />
    <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
  </div>
</div>
路雅懿
2023-03-14

要更改左右图标,只需更改以下代码:

icons: {
        time: 'glyphicon glyphicon-time',
        date: 'glyphicon glyphicon-calendar',
        up: 'glyphicon glyphicon-chevron-up',
        down: 'glyphicon glyphicon-chevron-down',
        //previous: 'glyphicon glyphicon-chevron-left',
        previous: 'glyphicon glyphicon-backward',
        next: 'glyphicon glyphicon-chevron-right',
        today: 'glyphicon glyphicon-screenshot',
        clear: 'glyphicon glyphicon-trash',
        close: 'glyphicon glyphicon-remove'
    },

默认情况下,我已经评论过图标显示的那一行,所以如果你需要更改图标,你只需设置路径或任何你想要显示的图标。

您可以参考以下链接:https://eonasdan.github.io/bootstrap-datetimepicker/Options/

 类似资料:
  • 我使用的是bootstrap3。x、 添加了datetimepicker 4.17,datetimepicker工作正常,但没有显示时钟图标和箭头图标。 https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js https://cdnjs.cl

  • 我正在尝试实现这里介绍的日期时间选择器https://eonasdan.github.io/bootstrap-datetimepicker/#minimum-安装程序,我已将文件文件下载到目录和。但当点击图标时,日历不会弹出。

  • 我在我的Web应用程序中使用引导日期时间选择器,由PHP/HTML5和JavaScript制作。我目前正在使用一个:http://tarruda.github.io/bootstrap-datetimepicker/ 当我没有时间使用控件时,它不工作。它只显示一个空白文本框。 我只想从日期时间选择器中删除时间。有什么解决办法吗?

  • 我使用了日期选择器,并将最大日期应用为2020年2月11日,而今天的日期是2019年2月12日。 我有一个问题,而改变年直接点击‘年’在日期选择器顶部。当日期选择器在当前日期(今天的日期:2019年2月12日)初始化时,如果我将年份更改为2020年2月12日,日期选择器将显示2020年2月12日作为标题,但在日历视图中选择的日期是选择的2月11日。 见以下图像::

  • 日期时间选择器是一个定制的picker,因此他的用法和picker完全一致。打开picker的默认值是当前时间,可以通过value参数指定 datetime-picker 定制了 onChange 和 cols 参数,请不要设置这两个参数。 <input type="text" id='datetime-picker'/> <script>   $("#datetime-picker").da

  • 我正在使用引导datetimepicker库使用日历选择日期。现在,由于需求变化,我还需要选择时间和日期。 在新变化之前,我使用下面的代码在文本字段上显示日历: 通过上面的代码,日历显示正常,一切正常。 为了显示时间选项,我刚刚更改了如下格式: 但使用这种方式,只显示时间选项,不显示日历。请看我附带的屏幕截图: 单击此处查看问题屏幕截图 我正在使用以下库来使用日历: https://cdnjs.c