在 jquery 日期选择器的标题中显示当前日期

Question

如何在 jquery 日期选择器的标题中显示当前的完整日期：

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 解决方案，将日期值附加到当前的日期选择器小部件。

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

码笔link http://codepen.io/anon/pen/WvzKJo

Answer 4

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

span.textContent = picker.selectedDay;

至

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

Demo

在 jquery 日期选择器的标题中显示当前日期

Show current day in the title of jquery datepicker

javascript

jquery

datepicker