日期选取器的自定义标头

Custom Header for Date Picker

本文关键字：自定义 选取 日期      更新时间：2023-09-26

I use pickadate.js （ http://amsul.ca/pickadate.js/date/）

我尝试创建一个自定义标题来显示类似于材料设计日期选择器的选定日期 - http://materializecss.com/forms.html#date-picker

我已经阅读了pickadate的文档.js但没有提到这种自定义。

有什么建议吗？

就像那个家伙：

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', 'mm');
                console.log(year, day, month);
                $('.picker__header').prepend('<div class="picker__date-display"><div class="picker__weekday-display">[current day label]</div><div class="picker__month-display"><div>[current month]</div></div><div class="picker__day-display"><div>'+day+'</div></div><div    class="picker__year-display"><div>'+year+'</div></div></div>');
            }

看这里 http://jsfiddle.net/ctx8ec9L/28/

我这样做 http://jsfiddle.net/ctx8ec9L/26/。

 $('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15 // Creates a dropdown of 15 years to control year,
    ,
    onRender: function() {
     $('.picker__header').prepend('<div class="picker__date-display"><div           class="picker__weekday-display">[current day label]</div><div class="picker__month-display"><div>[current month]</div></div><div class="picker__day-display"><div>[current days]</div></div><div    class="picker__year-display"><div>[current year]</div></div></div>');
 }
  });

我认为您可以使用amsul获得当前日期，标记日期，月份和年份。

希望有帮助。

这个是基于@Greg的答案。我将其修改为多用途。小提琴

function populatePickadateHeader(elem){
    var year = $(elem).pickadate('picker').get('highlight', 'yyyy');
    var day = $(elem).pickadate('picker').get('highlight', 'dd');
    var month = $(elem).pickadate('picker').get('highlight', 'mmm');
    var labelday = $(elem).pickadate('picker').get('highlight', 'dddd');
    console.log(year, day, month,labelday);
    $(elem + '_root' + ' .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>');
}

在初始化中使用它，例如

 $('#inputDatetime').pickadate({
     selectMonths: true, // Creates a dropdown to control month
     selectYears: 15, // Creates a dropdown of 15 years to control year,
     onRender: function () {
         populatePickadateHeader('#inputDatetime');        
     }
 });
相关文章：