beforeShow event not firing on jQueryUI Datepicker

问题

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?

回答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));

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

回答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.

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

回答5:

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);
}
});

回答6:

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');
    }
});

来源：https://stackoverflow.com/questions/3961963/beforeshow-event-not-firing-on-jqueryui-datepicker

标签

jquery-ui

datepicker