[英]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
. 我要插入一些文本( titleAttr
每天在下面在这种情况下), datepicker
,我试图通过实现这个beforeShowDay
。 According to doc, the return value of the function regarding beforeShowDay
is as follows, 根据doc,关于beforeShowDay
的函数的返回值如下,
An object with the following properties: 具有以下属性的对象:
enabled: same as the Boolean value above 已启用:与上面的布尔值相同
classes: same as the String value above 类:与上面的String值相同
tooltip: a tooltip to apply to this date, via the title HTML attribute 工具提示:通过标题HTML属性应用于该日期的工具提示
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? 所以,如果我设置tooltip
到titleAttr
,我会多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>
As you said in your question beforeShowDay
can return An object with the following properties: ... while in your case your beforeShowDay
returns an Array
. 如您在问题中所说, beforeShowDay
可以返回一个具有以下属性的对象:...而在您的情况下, beforeShowDay
返回一个Array
。
If you change the return value to an Object
with the mentioned proprieties you will have the following code: 如果将返回值更改为具有上述属性的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>
Note tha the HTML generated by the picker for a day is the following, so there is no a
tag: 注意THA由拾取一天生成的HTML是下面的,所以没有a
标签:
<td class="day" title="titleAttr">1</td>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.