beforeShow event not firing on jQueryUI Datepicker

Question

No matter what I try, I'm not able to get the beforeShow event to fire on my datepicker. Here's my code:

$('#calendar').datepicker({
inline: true,
dateFormat: 'mm,dd,yy',
beforeShow: function(input, inst) { alert('before'); }
});

I've added beforeShowDay and onSelect events to my datepicker, and they do fire correctly. Has anyone else had trouble with this?

Answer 1

Here's the solution my team came up with so we don't have to remember to modify the jQuery files every time there's an update. Just add this to your own script and include it:

(function ($) {
    $.extend($.datepicker, {

        // Reference the orignal function so we can override it and call it later
        _inlineDatepicker2: $.datepicker._inlineDatepicker,

        // Override the _inlineDatepicker method
        _inlineDatepicker: function (target, inst) {

            // Call the original
            this._inlineDatepicker2(target, inst);

            var beforeShow = $.datepicker._get(inst, 'beforeShow');

            if (beforeShow) {
                beforeShow.apply(target, [target, inst]);
            }
        }
    });
}(jQuery));

Answer 2

Actually, this is a little more correct (and follows the plugin/class pattern):

var beforeShow = $.datepicker._get(inst, 'beforeShow');
extendRemove(inst.settings, (beforeShow ? beforeShow.apply(target, [target, inst]) : {}));

Answer 3

I found a fix for that. You must add 3 lines of code in jquery.ui.datepicker.js (the full version)

Near line #274, find thisthis._updateAlternate(inst);

Right after this line, put the following :

var beforeShow = $.datepicker._get(inst, 'beforeShow');
if(beforeShow)
   beforeShow.apply();

Version from jqueryui.com does not have beforeShow enabled for inline datepicker. With this code, beforeShow is enabled.

Answer 4

I wanted to use beforeShow to update the minumum date on an end date datepicker to reflect the date set in the start date datepicker. I have revewed a number of solutions posted here and elsewhere which were complicated. I may be missing something but the following quite straight forward code works for me.

This resets the focus to the start date if none yet set and an attempt is made to enter an end date. If a start date has been set it sets the minimum date for the end _Date appropriately.

    $(function(){
    $("#start_Date").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "c-1:c+5",
        dateFormat: "dd-mm-yy"
    });
    $("#end_Date").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "c-1:c+5",
        dateFormat: "dd-mm-yy",
        beforeShow: end_Range
    });

    function end_Range(){
        if ($("#start_Date").datepicker("getDate") == null ){
            $("#start_Date").focus();
        } else {
            // set minimum date range
            $("#end_Date").datepicker("option", "minDate", new Date ($("#start_Date").datepicker("getDate")));
        };
    };
});

With date fields:

<label>Date</label><input class="datepicker" id="start_Date" type="text"/>
<label>Date</label><input class="datepicker" id="end_Date" type="text"/>