我想在tooldtip上显示月份名称而不是数字,我正在做:
<div class="container">
<div class="row" id="time" >
<div class="col-xs-4">
Days: <b>1</b> <input id="days" type="text" class="span2" value="" data-slider-min="1" data-slider-max="31" data-slider-step="1" data-slider-value="[0,31]"/> <b>31</b>
</div>
<div class="col-xs-4">
Months: <b>January</b> <input id="months" type="text"
data-provide="slider"
data-slider-ticks-labels='["January", "February", "March, "April", "May", "June", "July", "August", "September", "October", "November", "December"]'
data-slider-min="1"
data-slider-max="12"
data-slider-step="1"
data-slider-value=""
data-slider-tooltip="show" /> <b>December</b>
</div>
<div class="col-xs-4">
Years: <b>0</b> <input id="years" type="text" class="span2" value="" data-slider-min="0" data-slider-max="2017" data-slider-step="1" data-slider-value="[0,2017]"/> <b>Today</b>
</div>
</div>
</div>
我称之为:
$("#days, #years, #months").slider({
tooltip: 'always'
});
滑块工作正常,但工具提示未显示月份名称,但显示数字。
答案 0 :(得分:3)
为此,您必须使用格式化程序功能。你可以在这里看到这个例子(例23)。
在你的情况下:
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
$("#days, #years").slider({
tooltip: 'always'
});
$("#months").slider({
tooltip: 'always',
value: [0, 12],
tooltip: 'always',
formatter: function(values) {
return months[values[0]-1] + ' : ' + months[values[1]-1];
},
});