日期选择器的自定义标题答案

【问题标题】：Custom Header for Date Picker日期选择器的自定义标题
【发布时间】：2016-06-30 14:34:07
【问题描述】：

我使用pickadate.js (http://amsul.ca/pickadate.js/date/)

我尝试创建一个自定义标题来显示类似于 Material Design Date Picker - http://materializecss.com/forms.html#date-picker的所选日期

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

有什么建议吗？

【问题讨论】：

标签： javascript jquery datepicker material-design

【解决方案1】：

就像那个家伙：

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/

【讨论】：

好的，我为你做了：jsfiddle.net/ctx8ec9L/29 不要忘记检查解决问题:)
是的，确实如此。谢谢
如果我定义了许多具有不同初始化选项的日期选择器怎么办？我必须为每个定义这样的标题吗？

【解决方案2】：

我这样做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 获取当前日期、标签日期、月份和年份。

希望对您有所帮助。

【讨论】：

非常有帮助，谢谢。现在我正在尝试获取一个选定的日期并显示它。我尝试使用 amsul get 方法（amsul.ca/pickadate.js/api/#method-get），但我无法弄清楚如何让它与您的代码一起使用。你能再给我一个提示吗？提前谢谢你
这里是声明点$('.datepicker').pickadate('picker').get('highlight', 'yyyy/mm/dd')amsul.ca/pickadate.js/api/#method-get-highlight
Greg，你能看看我在这个话题底部的评论吗？

【解决方案3】：

这是基于@Greg 的回答。我将其修改为多用途。 JsFiddle

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');        
     }
 });

【讨论】：