在jquery datepicker的标题中显示当前日期

Question

如何在jquery datepicker的标题中显示当前的完整日期，如下所示：

05 July 2015因为它只显示July 2015

Answer 1

您可以在 onSelect

中使用这样的功能

function showDateInTitle(picker) {
    var span = picker.dpDiv[0].querySelector('.ui-datepicker-day'),
        df, month;
    if (span === null) {
        month = picker.dpDiv[0].querySelector('.ui-datepicker-month');
        if (!month) return;
        span = document.createElement('span');
        span.setAttribute('class', 'ui-datepicker-day');
        df = document.createDocumentFragment();
        df.appendChild(span);
        df.appendChild(document.createTextNode('\u00a0'));
        month.parentNode.insertBefore(
            df,
            month
        );
    }
    span.textContent = picker.selectedDay;
}

在选择之前显示日期选择器之后，仍在查看处理程序的API

您可以将 afterShow 实现为described here，稍加修改即可获取实例

$(function() {
    $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function(inst) {
        $.datepicker._updateDatepicker_original(inst);
        var afterShow = this._get(inst, 'afterShow');
        if (afterShow)
            afterShow.apply((inst.input ? inst.input[0] : null), [inst]);
    }
});

现在DEMO

Answer 2

我无法找到一种非黑客的方法，但将默认配置更改为您要显示的文字可能会为您做到：

var defaults = {
  monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]
};

var today = new Date();
var month = today.getMonth();
defaults.monthNames[month] = today.getDate() + ' ' +  defaults.monthNames[month];

$.datepicker.setDefaults(defaults);

这是一个有效的plnkr：http://plnkr.co/edit/gfp95VOchd4fhQOktIL3?p=preview

Answer 3

这是我的解决方案，它是一个简单的jquery解决方案，它将day值附加到当前的datepicker小部件。

$('#datepicker').click(function(){
  var $datePickerBox = $('#ui-datepicker-div'); 
  //var $datePickerBox = $(this).closest('.ui-datepicker.ui-widget'); 
  var $monthName = $datePickerBox.find('.ui-datepicker-month');
  var currentDay = '';
  if($(this).val().trim().length==0){
    currentDay = $datePickerBox.find('.ui-datepicker-today').text();
  } else {
    currentDay = $datePickerBox.find('.ui-datepicker-current-day').text();
  }
  $monthName.text( currentDay + " " + $monthName.text() );
});

代码笔链接 http://codepen.io/anon/pen/WvzKJo

Answer 4

如果您希望始终在顶部而不是所选日期显示当前日期，请使用@ PaulS。代码更改

span.textContent = picker.selectedDay;

到

span.textContent = new Date().getDate();

Demo