我使用AMsul Pickadate并尝试通过使用jquery .prepend添加自定义标头
它工作正常,但是当我在一页上使用2个数据选择器时,将自定义标头添加到第一个数据选择器两次,这使它看起来很荒谬。
这是我的js代码:
$.extend($.fn.pickadate.defaults, {
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year,
onRender: function () {
var year = $('.datepicker').pickadate('picker').get('highlight', 'yyyy');
var day = $('.datepicker').pickadate('picker').get('highlight', 'dd');
var month = $('.datepicker').pickadate('picker').get('highlight', 'mmm');
var labelday = $('.datepicker').pickadate('picker').get('highlight', 'dddd');
console.log(year, day, month, labelday);
$('.picker__header').prepend('<div class="picker__date-display"><div class="picker__weekday-display">' + labelday + '</div><div class="picker__month-display"><div>' + month + '</div></div><div class="picker__day-display"><div>' + day + '</div></div><div class="picker__year-display"><div>' + year + '</div></div></div>');
}
});
这是当我在一页上使用2个数据选择器时的结果:
我的html标记如下所示:
<!-- First datapicker-->
<input placeholder="Selected date" type="text" id="input_from" class="form-control datepicker">
<!--Second datapicker -->
<input placeholder="Selected date" type="text" id="input_to" class="form-control datepicker">
我通过js初始化选择器:
// Datapicker initialization
$('.datepicker').pickadate();
我如何才能使其始终仅向每个数据选择器添加一个自定义标头,即使有多个自定义标头也是如此?
最佳答案
jQuery prepend方法会将您提供给所有与选择器匹配的元素放在前面:$('.picker__header')
这将在每次启动时都可以找到的两个.picker__header
之前。通过将其放入render回调中,每次渲染日期选择器时都会调用它。因此,两次,因为您有2个日期选择器。
最好的办法是在仅调用一次的回调中添加前缀,或者在render回调中增加一个计数器。就像是:
var dateCounter = 0;
...
onRender: function () {
dateCounter++;
if (dateCounter === 2) {
$('.picker__header').prepend(...
}
}
但是有很多方法可以做到这一点。 pickadate.js API中可能有些更优雅的东西?