2017-02-16 73 views
0

我想在datepicker的每一天下面插入一些文本(在這種情況下爲titleAttr),我試圖通過beforeShowDay來實現。據文檔,關於beforeShowDay是如下的函數的返回值,beforeShowDay在bootstrap-datepicker中的標題不起作用

具有以下屬性的對象:

啓用:相同布爾值以上

類:相同上述

提示字符串值:工具提示適用於這個日期,通過標題HTML屬性

所以,如果我設置tooltiptitleAttr,我會得到多個a標籤與屬性title組在日期選擇器titleAttr,這樣我就可以插入這些a標籤後一些文本,但我沒有得到與屬性title任何標記,我錯了?

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

回答

1

正如你在你的問題beforeShowDay說可以返回一個對象,具有以下屬性:你的情況...,而你beforeShowDay返回Array

如果你所提到的禮節改變返回值的Object你有下面的代碼:

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

注意THA由選擇器生成的HTML一天是以下,所以沒有a標籤:

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

是的,我應該返回一個'object'而不是'array' 。我不敢相信我一直在尋找這麼長時間的答案,但它非常簡單。我一定把'jquery-datepicker'和'bootstrap-datepicker'搞混了。謝謝! – Searene