Show current day in jquery datepicker header

Question

How to show current full date in jQuery datepicker title as follows:

05 July 2015 because it shows me just July 2015

Answer 1

I could not find a non-hacker way to do this, but changing the default configuration for the text you want to show can do this 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

Answer 2

You can use such a function 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; } 

The API for the handler is still viewed after the date picker is displayed before making a choice

---

You can implement afterShow as described here with a little modification to get an 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

Answer 3

Here is my solution, this is a simple jquery solution that adds 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() ); }); 

Link to link for the code http://codepen.io/anon/pen/WvzKJo

Answer 4

If you want to always show the current date at the top, not the selected date, use @PaulS. code change

 span.textContent = picker.selectedDay; 

to

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

Demo