如何更改 Bootstrap 日期选择器图标？

Question

我想更改 next 和 prev 箭头。但是 innerHTML 不影响 <th class="next">>></th>。我能做什么？

$(".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>

Answer 1

您需要遍历上一个和下一个 class 并更改内部 HTML

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

Answer 2

您可以这样更改图标：

$(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">

Answer 3

这是另一个只有 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>

使用蒙版更改图标的颜色：（您已经可以通过更改填充或描边颜色来更改 SVG 的颜色，但假设您使用的是 PNG 而不是 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>

如何更改 Bootstrap 日期选择器图标？

How can I change Bootstrap Datepicker icons?

html

javascript

css

twitter-bootstrap

bootstrap-datepicker