Show current day in the title of jquery datepicker

Question

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

enter image description here

possible duplicate of [jQuery UI DatePicker - Change Date Format](http://stackoverflow.com/questions/1328025/jquery-ui-datepicker-change-date-format) — Kalem, Jul 05 '15 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, Jul 05 '15 at 14:21
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, Jul 07 '15 at 17:21

Paul S. · Answer 1 · 2015-07-07T17:45:44.900

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 hardly see why the thread starter has this weird need. I have answered to this question as well, but after seeing your answer, i realized that you took the better approach by taking advantage of the datepicker built in onSelect function. Thumbs up. — Ji_in_coding, Jul 07 '15 at 17:51

yvesmancera · Accepted Answer · 2015-07-13T23:49:30.093

2

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

edited Jul 13 '15 at 23:49

answered Jul 07 '15 at 17:32

yvesmancera

2,915
5
24
33

your answer is good for me because the current day show just in the current month but the day is wrong – Hayi Jul 13 '15 at 11:04
You're right, changed my answer from today.getDay() (gets day of the week) to today.getDate() (gets day of the month). Also updated plunkr. – yvesmancera Jul 13 '15 at 23:50

score 1 · Answer 3 · answered Jul 07 '15 at 17:42

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

score 1 · Answer 4 · answered Jul 10 '15 at 14:00

1

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

answered Jul 10 '15 at 14:00

depperm

10,606
4
43
67

Show current day in the title of jquery datepicker

4 Answers4