我使用Bootstrap datetimepickerhttps://eonasdan.github.io/bootstrap-datetimepicker/
正如文档中提到的,我能够使用下面的代码成功地更改向上和向下箭头。
$('#datetimepicker7').datetimepicker({
sideBySide: true,
icons: {
up: "fa fa-chevron-circle-up",
down: "fa fa-chevron-circle-down",
}
});
我可以知道如何更改日历的左右图标吗?为了便于理解,我在下图中突出显示了要更改的图标。
任何帮助将高度赞赏。
您只需在配置中的图标
对象中插入previous
和next
键,如文档中所述。
$('#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>
要更改左右图标,只需更改以下代码:
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