Search code examples
jqueryiconsglyphiconsbootstrap-datetimepickereonasdan-datetimepicker

Bootstrap Glyphicons datetimepicker change icons

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.

Bootstrap Glyphicons image

Any help would be highly appreciated.

Solution

  • 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/