Multiple-Dates-Picker-for-jQuery-UI

Multiple-Dates-Picker-for-jQuery-UI copied to clipboard

The calendar works well generally.

At the moment while selecting dates on the calendar popup, for each click, the calendar is being redrawn. Is it possible to avoid this?

I second this. Is there a workaround for this?

Also if I select a date from a month different from the current month, it redraws that month only for the first selection but redraws the current month back in subsequent selections.

Checked in http://multidatespickr.sourceforge.net/#undefined-demo version: 1.6.1

I vote for this issue as well. Selecting a date of different month rather then current month will flicker a bit and shows back the current month.

please tell me the way to stop the flicker

same problem here

If anyone fixes this, please send a pull request so that it can be used to update the code.

The issue is caused by the onSelect native function of the jQuery Datepicker that the code extends. That function causes the calendar to close when a date is picked and MDP adds a short timeout that reopens back the calendar. The solution would be to somehow prevent the close animation to start in the jq Datepicker onSelect.

Hey guys, I think this would work best! $('#from-input').multiDatesPicker( onSelect: function() { $(this).data("datepicker").inline = true;
}, onClose: function() { $(this).data("datepicker").inline = false; },

);

I've succeeded in improving the display reducing the flickering effect but, as it has been said, it is caused by the way the original date picker works. Meanwhile try out the version 1.6.2 :)

Still not working here. It does not redrawn on first chosen date, but after the second it stills flickering.

This will do it...

$.datepicker._selectDateOverload = $.datepicker._selectDate; $.datepicker._selectDate = function(id, dateStr) { var target = $(id); var inst = this._getInst(target[0]); inst.inline = true; $.datepicker._selectDateOverload(id, dateStr); inst.inline = false; this._updateDatepicker(inst); };

@ojdavey , yes that works for me. thanks!

I also have this problem, if I go to another month I can select up to two dates and it redraws. These fixes are not working I'm using the following code...

jQuery(document).ready(function($) {

    $('#acf-field-all_dates').multiDatesPicker({
        dateFormat: "yy-m-d"
    });

    $.datepicker._selectDateOverload = $.datepicker._selectDate;
    $.datepicker._selectDate = function(id, dateStr) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    inst.inline = true;
    $.datepicker._selectDateOverload(id, dateStr);
    inst.inline = false;
    this._updateDatepicker(inst);
    };
});

Got this working, I had to enque my js at a higher priority. It was conflicting with ACF's date picker.

Why all complicated solution for such simple issue?

On _hideDatepicker function of multidatepicker, after $.datepicker._updateDatepicker(target); add the following $.datepicker._refreshDatepicker(target);

@anagio solution worked for me, i've just added this line target[0].multiDatesPicker.changed = false; after inst.inline = false; This code avoided 2 clicks outside calendar to close it.

The final code is:

$.datepicker._selectDateOverload = $.datepicker._selectDate;
$.datepicker._selectDate = function (id, dateStr) {
        var target = $(id);
        var inst = this._getInst(target[0]);
        inst.inline = true;
        $.datepicker._selectDateOverload(id, dateStr);
        inst.inline = false;
        target[0].multiDatesPicker.changed = false;
        this._updateDatepicker(inst);
    };

Problem with the @anagio and @johniecco solution is it overwrites the functionality of ordinary single datepickers. I get an error on this line: target[0].multiDatesPicker.changed = false; as being undefined, when using an ordinary datepicker.

@thomstark to resolve this problem:

$.datepicker._selectDateOverload = $.datepicker._selectDate;
    $.datepicker._selectDate = function (id, dateStr) {
        var target = $(id);
        var inst = this._getInst(target[0]);
        inst.inline = true;
        $.datepicker._selectDateOverload(id, dateStr);
        inst.inline = false;
        if (target[0].multiDatesPicker != null) {
            target[0].multiDatesPicker.changed = false;
        } else {
            target.multiDatesPicker.changed = false;
        }
        this._updateDatepicker(inst);
    };

@victorgsp it work good. But dafault datepicker don`t autohide on select. I update your code

$.datepicker._selectDateOverload = $.datepicker._selectDate;
$.datepicker._selectDate = function (id, dateStr) {
	var target = $(id);
	var inst = this._getInst(target[0]);
	if (target[0].multiDatesPicker != null) {
		inst.inline = true;
		$.datepicker._selectDateOverload(id, dateStr);
		inst.inline = false;	        	
		target[0].multiDatesPicker.changed = false;
	} else {
		$.datepicker._selectDateOverload(id, dateStr);
		target.multiDatesPicker.changed = false;
	}
	this._updateDatepicker(inst);
};