如何更改 Bootstrap Datepicker 图标？

Question

我想改变未来和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

您可以像这样更改图标：

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

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

Answer 3

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

$(".prev").each(function(i) {$(".prev")[i].innerHTML = "你的图标"})