CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapdatepicker
Searene
Searene

Reputation: 27604

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

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>

Upvotes: 0

Views: 1424

Answers (1)

VincenzoC
VincenzoC

Reputation: 31502

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>

Upvotes: 1

Related Questions