beforeShowDay Titel in Bootstrap-Datepicker funktioniert nicht

Question

Ich möchte einige Texte (titleAttr in diesem Fall) unter jeden Tag in datepicker einfügen, habe ich versucht, dies über beforeShowDay zu erreichen. Nach doc, der Rückgabewert der Funktion in Bezug auf beforeShowDay ist wie folgt,

ein Objekt mit den folgenden Eigenschaften:

aktiviert: gleiche wie der Boolesche Wert über

Klassen: wie die String-Wert über

Tooltip: ein Tooltip zu diesem Zeitpunkt über den Titel HTML-Attribut anwenden

Also, wenn ich gesetzt tooltip zu titleAttr, werde ich mehrere a Tags mit Attributen title Satz titleAttr in picker bekommen, so kann ich einige Texte nach diesen a Tags einfügen, aber ich habe keinen Tag mit dem Attribute title, bin ich falsch ?

$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

Wie gesagt, Sie in Ihrer Frage beforeShowDayEin Objekt mit den folgenden Eigenschaften zurückgeben kann: ... während in Ihrem Fall Ihre beforeShowDay eine Array zurückgibt.

Wenn Sie den Rückgabewert in eine Object mit den genannten Anstands ändern Sie den folgenden Code haben:

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

Hinweis tha HTML vom Picker erzeugt für einen Tag das ist folgend, so gibt es keine a Markierung:

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