javascript - Show current day in the title of jquery datepicker - Stack Overflow

admin管理员组

文章数量:1291024

How can I show current full date in the title of jquery datepicker like this :

05 July 2015 because it show me just July 2015

How can I show current full date in the title of jquery datepicker like this :

05 July 2015 because it show me just July 2015

• javascript
• jquery
• datepicker

Share Improve this question Follow edited Jul 5, 2015 at 15:39 Hayi asked Jul 5, 2015 at 13:57 HayiHayi 6,2663030 gold badges8383 silver badges154154 bronze badges 4

• 1 possible duplicate of jQuery UI DatePicker - Change Date Format – Kalem Commented Jul 5, 2015 at 14:16
• no i don't talk about the selected date after i click on a date i talk about just the date that is displayed in the header – Hayi Commented Jul 5, 2015 at 14:21
• 3 That text is the name of the month currently displayed in the calendar. If you change that to be today's date, what would you expect to see when you navigate to a different month? – Richard Deeming Commented Jul 7, 2015 at 17:21
• I have posted my answer, with a working example on codepen – Ji_in_coding Commented Jul 7, 2015 at 17:45

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You could use a function like this in 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;
}

Still looking through API for a handler for after the datepicker is shown before choice is made

---

You can implement an afterShow as described here with a slight modification to get the instance

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

Now DEMO

I couldn't find a non-hacky way of doing it, but changing the defaults config to the text you want to show might do it for you:

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

Here is a working plnkr: http://plnkr.co/edit/gfp95VOchd4fhQOktIL3?p=preview

Here is my solution, it is a simple jquery solution that append the day value to the current datepicker widget.

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

Code pen link http://codepen.io/anon/pen/WvzKJo

If you want to always show the current date at the top and not the selected date, using @PaulS.'s code change

span.textContent = picker.selectedDay;

to

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

Demo

本文标签： javascriptShow current day in the title of jquery datepickerStack Overflow