beforeShowDay's title in bootstrap-datepicker doesn't work

Question

I want to insert some texts( titleAttr in this case) below each day in datepicker , I tried to achieve this via beforeShowDay . According to doc, the return value of the function regarding beforeShowDay is as follows,

An object with the following properties:

enabled: same as the Boolean value above

classes: same as the String value above

tooltip: a tooltip to apply to this date, via the title HTML attribute

So if I set tooltip to titleAttr , I will get multiple a tags with attributes title set to titleAttr in datepicker, so I can insert some texts after those a tags, but I didn't get any tag with attribute title , am I wrong?

 $datepicker = $('.input-group.date'); $datepicker.datepicker({ beforeShowDay: function(date) { return [true, "", "titleAttr"]; } }); 

 .datepicker td a[title]:after { content: attr(title); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> <div class="input-group date pull-right" style="width: 150px;"> <input type="text" class="form-control" /> <div class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </div> </div> 

Answer 1

As you said in your question beforeShowDay can return An object with the following properties: ... while in your case your beforeShowDay returns an Array .

If you change the return value to an Object with the mentioned proprieties you will have the following code:

 $datepicker = $('.input-group.date'); $datepicker.datepicker({ beforeShowDay: function(date) { return { enabled: true, classes: "", tooltip: "titleAttr" }; } }); 

 .datepicker td a[title]:after { content: attr(title); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> <div class="input-group date pull-right" style="width: 150px;"> <input type="text" class="form-control" /> <div class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </div> </div> 

Note tha the HTML generated by the picker for a day is the following, so there is no a tag:

<td class="day" title="titleAttr">1</td>