I am using Bootstrap datetimepicker https://eonasdan.github.io/bootstrap-datetimepicker/
As mentioned in the document I was successfully able to change the up, down arrows using below code.
$('#datetimepicker7').datetimepicker({
sideBySide: true,
icons: {
up: "fa fa-chevron-circle-up",
down: "fa fa-chevron-circle-down",
}
});
May I know how to change the left, right icons of the calendar? For easy understanding I have highlighted the icons to be changes in below image.
Any help would be highly appreciated.
In order to change left and right icons you just need to change in the below code:
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'
},
By default the line which i have commented that icon is showing so if u need to change that icon you just simply have to set the path or any icon which you want to show.
You can refer below link:
https://eonasdan.github.io/bootstrap-datetimepicker/Options/
You just have to insert previous
and next
keys in your icons
object in the configuration as stated in the docs.
$('#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>