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,
dateF         


        

Answer 1

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 2

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"/>

Answer 3

It's a little bit tricky but use the setTimeout method to launch the function works well for me.

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

Answer 4

Have you assign datepicker() to this element before ?

beforeShow event attach to element once you assign datepicker() at first time. If you reassign datepicker() to the same element then it will not work properly.

Try to 'destroy' and reassign datepicker() which is well work for me.

$('#calendar').datepicker('destroy');

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

Answer 5

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 6

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]) : {}));