Skip to main content

Search and Top Navigation

#7747 closed enhancement (notabug)

Opened September 28, 2011 04:23PM UTC

Closed September 28, 2011 04:36PM UTC

Datepicker «Today» button still usable when today's date is disabled (using beforeShowDay)

Reported by: javs Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.datepicker Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:

Hi there,

New jQuery (UI) user here... I've been using jQuery and its UI Widgets for a while and I love it. However, I found a little something that might be of interest about the Datepicker.

When disabling today's date using the «beforeShowDay» event, the «Today» button is still usable but serves no useful purpose. Of course, this is not a bug, as clicking the «Today» button sets focus to the associated input field without further ado.

However, as the (sole ?) purpose of the «Today» button is to select today's date in the calendar, if that date is disabled in the calendar then why not disabling the button or prevent its rendering ?

In « jquery.ui.datepicker.js », line 1466, the «Today» button will show up if the current date (which is today's date by default) is within the specified range (if any). This is good but there could be a second logical test ; the «Today» button should be disabled (or not rendered) if today's date is disabled in the calendar.

Of course, I could (can, may) easily disable or prevent the rendering of the «Today» button myself but I don't see a reason not to submit this to you guys.

I'm using...

  • Windows XP Service Pack 3
  • jQuery 1.6.4 (jsFiddle example is using 1.6.3 but can still reproduce the «problem»)
  • jQuery UI 1.8.16
  • Windows Internet Explorer 7.0.5730.13CO, Mozilla Firefox 3.6.22 and Google Chrome 12.0.742.112 for the use case test (I believe any browser will reproduce the «problem»). You only need to focus in the input field associated with the Datepicker instance and click the «Today» button.
  • The code is injected into the page using ASP.NET methods but I believe it doesn't matter.
  • (or the following code is jsFiddle isn't working) ...
$(function() {
    function ctl00_CPH_K1ZoneContenu1_Cadr_Section01_Cadriciel_FS_Section01_K1ChampDate1__cs_beforeShow(input, inst) {
        inst.dpDiv.css({ marginLeft: input.offsetWidth + 'px' }); 
    function ctl00_CPH_K1ZoneContenu1_Cadr_Section01_Cadriciel_FS_Section01_beforeShowDay(d) {
        var dateState, hasEnabledDates, hasDisabledDates, dayToVerify, disabledDates, disabledDatesDescr, enabledDates, enabledDatesDescr, disabledDayPos, enabledDayPos;
        dateState = null; 
        dayToVerify = d.getFullYear() + "-" + d.getMonth() + "-" + d.getDate(); 
        enabledDates = new Array(); 
        enabledDatesDescr = new Array(); 
        disabledDates = new Array("2011-8-28"); 
        disabledDatesDescr = new Array("Today's date is disabled using the beforeShowDay event."); 
        hasEnabledDates = (enabledDates.length > 0) ? true : false; 
        hasDisabledDates = (disabledDates.length > 0) ? true : false; 
        enabledDayPos = $.inArray(dayToVerify, enabledDates); 
        disabledDayPos = $.inArray(dayToVerify, disabledDates); 
        if ((hasEnabledDates && enabledDayPos === -1) || (hasDisabledDates && disabledDayPos !== -1)) {
            if (hasEnabledDates && enabledDayPos === -1) {
                dateState = [false, "", ""]; 
            if (hasDisabledDates && disabledDayPos !== -1) {
                dateState = [false, "", disabledDatesDescr[disabledDayPos]]; 
        else if ((hasDisabledDates && disabledDayPos === -1) || (hasEnabledDates && enabledDayPos !== -1)) {
            if (hasDisabledDates && disabledDayPos === -1) {
                dateState = [true, "", ""]; 
            if (hasEnabledDates && enabledDayPos !== -1) {
                dateState = [true, "", enabledDatesDescr[enabledDayPos]]; 
        return dateState;
        beforeShow: ctl00_CPH_K1ZoneContenu1_Cadr_Section01_Cadriciel_FS_Section01_K1ChampDate1__cs_beforeShow,
        beforeShowDay: ctl00_CPH_K1ZoneContenu1_Cadr_Section01_Cadriciel_FS_Section01_beforeShowDay, 
        firstDay: "0",
        dateFormat: "yy-mm-dd",
        duration: "normal",
        showAnim: "fadeIn",
        showOn: "button",
        disabled: false,
        autoSize: false,
        buttonImageOnly: false,
        changeMonth: true,
        changeYear: true,
        constrainInput: true,
        gotoCurrent: false,
        hideIfNoPrevNext: false,
        navigationAsDateFormat: false,
        selectOtherMonths: false,
        showButtonPanel: true,
        showMonthAfterYear: false,
        showOtherMonths: false,
        showWeek: true
    $("#ctl00_CPH_K1ZoneContenu1_Cadr_Section01_Cadriciel_FS_Section01_K1ChampDate1__cs").datepicker("option", $.datepicker.regional['fr']);

What you guys think ?

P.S. : just in case, sorry if my ticket is duplicate...

Attachments (0)
Change History (1)

Changed September 28, 2011 04:36PM UTC by scottgonzalez comment:1

resolution: → invalid
status: newclosed

You seem to misunderstand what the today button does. It focuses the current month, it doesn't select a date.