javascripthtmlcsstwitter-bootstrapbootstrap-datepicker

How can I change Bootstrap Datepicker icons?


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>


Solution

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