How can I change Bootstrap Datepicker icons?

Question

I want to change next and prev arrows. But innerHTML is doesn't affect <th class="next">>></th>. What can I do?

$(".datepicker").datepicker();

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">

<input type="text" class="datepicker">

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

Possible duplicate of [Bootstrap Glyphicons datetimepicker change icons](https://stackoverflow.com/questions/38519259/bootstrap-glyphicons-datetimepicker-change-icons) — cloned, Jul 18 '19 at 06:34
this is not duplicate. it datetimepicker. this datepicker. they are different. — doğukan, Jul 18 '19 at 06:36

doğukan · Answer 1 · 2023-01-11T14:18:07.627

Here is another idea with only CSS.

$(".datepicker").datepicker();

.table-condensed > thead > tr:nth-child(2) > .prev {
  font-size: 0;
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='19' y1='12' x2='5' y2='12'%3E%3C/line%3E%3Cpolyline points='12 19 5 12 12 5'%3E%3C/polyline%3E%3C/svg%3E") 50% 50% / contain no-repeat;
}

.table-condensed > thead > tr:nth-child(2) > .next {
  font-size: 0;
  background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") 50% 50% / contain no-repeat;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">

<input type="text" class="datepicker">

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

Change the color of icons by using mask: (You can already change the color of SVG by changing the fill or stroke color but let's say you're using a PNG instead of SVG)

$(".datepicker").datepicker();

.table-condensed > thead > tr:nth-child(2) > .prev {
  font-size: 0;
  --mask: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='19' y1='12' x2='5' y2='12'%3E%3C/line%3E%3Cpolyline points='12 19 5 12 12 5'%3E%3C/polyline%3E%3C/svg%3E") 50% 50% / contain no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
   background: red;
}

.table-condensed > thead > tr:nth-child(2) > .next {
  font-size: 0;
  --mask: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") 50% 50% / contain no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
   background: blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">

<input type="text" class="datepicker">

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

score 1 · Accepted Answer · edited Jul 18 '19 at 08:40

You can change icon like this way :

$(document).ready(function(){
    $(".datepicker").datepicker().on('show', function(e){
       $('.prev').text('<<<');
    $('.next').text(">>>");
    });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<input type="text" class="datepicker">

score 0 · Answer 3 · answered Jul 18 '19 at 06:44

0

You need to loop over prev and next class and change the inner HTML

$(".prev").each(function(i) {$(".prev")[i].innerHTML = "your icon"})

answered Jul 18 '19 at 06:44

raj m

1,863
6
21
37

How can I change Bootstrap Datepicker icons?

3 Answers3