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

【问题标题】：Show current day in the title of jquery datepicker在 jquery datepicker 的标题中显示当前日期
【发布时间】：2023-03-28 06:45:01
【问题描述】：

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

05 July 2015 因为它只显示July 2015

【问题讨论】：

jQuery UI DatePicker - Change Date Format 的可能重复项
不，当我点击一个日期后，我不谈论所选日期，我只谈论标题中显示的日期
该文本是日历中当前显示的月份的名称。如果您将其更改为今天的日期，当您导航到另一个月份时，您希望看到什么？
@RichardDeeming 我明白了；）谢谢伙计
我已经发布了我的答案，并在 codepen 上有一个工作示例

标签： javascript jquery datepicker

【解决方案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

【讨论】：

我几乎不明白为什么线程启动器有这种奇怪的需求。我也回答了这个问题，但是在看到您的回答后，我意识到您通过利用 onSelect 函数中内置的 datepicker 采取了更好的方法。竖起大拇指。

【解决方案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

【讨论】：

你的回答对我有好处，因为当前日期只是在当前月份显示，但日期是错误的
你说得对，将我的答案从 today.getDay() （获取星期几）更改为 today.getDate() （获取月份中的哪一天）。还更新了 plunkr。

【解决方案3】：

这是我的解决方案，它是一个简单的 jquery 解决方案，将日期值附加到当前的 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

【讨论】：

【解决方案4】：

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

span.textContent = picker.selectedDay;

到

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

Demo

【讨论】：