Javascript 单击上一个月/下一个月时停止jQuery Datepicker刷新

我有以下问题：我正在使用jQuery Datepicker，以便用户可以选择航班日期。我面临的唯一问题是，当用户选择日期，然后单击顶部箭头转到上一个月或下一个月，然后用户选择的日期重新着色，返回到原始日期。我怎样才能解决这个问题？请帮忙。我提供一把小提琴：

---

我想出了这个解决办法。谢谢你花时间看这个。让我知道你是否可以重新修改此代码更好

$(document).ready(function() {

            var selected_dept_date = "";
            var selected_return_date = "";

            var actual_start_date = "2014-10-04";
            var actual_end_date = "2014-10-20";

            var actual_end_date_DATE = new Date(actual_end_date);
            actual_end_date_DATE.setDate(actual_end_date_DATE.getDate() + 1);


            var time = "T00:00:00";
            var start_date = actual_start_date + time;
            var end_date = actual_end_date + time;

            var date1 = new Date(start_date);
            var date2 = new Date(end_date);


            var pre_nights = 5;
            var post_nights = 2;

            var pre_nights_count = pre_nights;
            var post_nights_count = post_nights;
            var msecPerDay = 24 * 60 * 60 * 1000;
            date2.setDate(date2.getDate() + 1);


            function getAllDays(d1, d2) {
                var s = new Date(d1);
                s.setHours(0, 0, 0, 0);
                var e = new Date(d2);
                e.setHours(0, 0, 0, 0);
                var a = [];
                while (s < e) {
                    a.push(s);
                    s = new Date(s.setDate(s.getDate() + 1));
                }
                return a;
            }


            var pre_night_dates_arr = [];
            var post_night_dates_arr = [];


            if (pre_nights > 0) {
                date1 = new Date(date1.getTime() - (msecPerDay * pre_nights));

                $.each(getAllDays(date1, date2), function(key, val) {
                    if (pre_nights_count > 0) {
                        pre_night_dates_arr.push(val);
                        pre_nights_count--;
                    } else {
                        return false;
                    }
                });
            }


            if (post_nights > 0) {
                date2 = new Date(date2.getTime() + (msecPerDay * post_nights));
                $.each(getAllDays(date1, date2), function(key, val) {
                    if (post_nights_count > 0) {

                        if (val.getTime() > actual_end_date_DATE.getTime()) {
                            post_night_dates_arr.push(val);
                            post_nights_count--;
                        }

                    } else {
                        return false;
                    }
                });
            }

            var start_date_after_settings = new Date(getAllDays(date1, date2)[0]);
            start_date_after_settings.setDate(start_date_after_settings.getDate() - 1);

            var end_date_after_settings = new Date($(getAllDays(date1, date2)).last()[0]);
            end_date_after_settings.setDate(end_date_after_settings.getDate() + 1);


            function load_tour_dates() {
                $(".ui-state-active").removeClass("ui-state-active");
                $('.ui-datepicker-group').each(function() {
                    $(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function() {
                        var this_elem = $(this);
                        var this_date = new Date(this_elem.data('year') + "," + (this_elem.data('month') + 1) + "," + ("0" + this_elem.text()).slice(-2));
                        $.each(getAllDays(date1, date2), function(key, val) {

                            if (pre_night_dates_arr.length > 0) {
                                $.each(pre_night_dates_arr, function(key2, val2) {
                                    if (this_date.getTime() == val2.getTime()) {
                                        this_elem.addClass("extra_nights_color");
                                    }
                                });
                            }

                            if (this_date.getTime() == val.getTime()) {
                                this_elem.addClass("tour_dates_color");
                                return false;
                            }

                            if (post_night_dates_arr.length > 0) {
                                $.each(post_night_dates_arr, function(key2, val2) {
                                    if (this_date.getTime() == val2.getTime()) {
                                        this_elem.addClass("extra_nights_color");
                                    }
                                });
                            }

                        });
                    });
                });
            }

            function load_selected_start_dates() {

                $('.ui-datepicker-group').each(function() {
                    $(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function() {
                        var this_elem = $(this);
                        var this_date = new Date(this_elem.data('year') + "," + (this_elem.data('month') + 1) + "," + ("0" + this_elem.text()).slice(-2));
                        if (selected_dept_date instanceof Date) {
                            if (this_date.getTime() == selected_dept_date.getTime()) {
                                this_elem.addClass("flight_dept_color");
                            }
                        } else {
                            if (this_date.getTime() == start_date_after_settings.getTime()) {
                                this_elem.addClass("flight_dept_color");
                            }
                        }

                        if (selected_return_date instanceof Date) {
                            if (this_date.getTime() == selected_return_date.getTime()) {
                                this_elem.addClass("flight_return_color");
                            }
                        } else {
                            if (this_date.getTime() == end_date_after_settings.getTime()) {
                                this_elem.addClass("flight_return_color");
                            }
                        }
                    });
                });


            }

            function select_date(date) {

                var curr_date_mod = new Date(date);

                $('.ui-datepicker-group').each(function() {
                    $(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function() {
                        var this_elem = $(this);
                        var this_date = new Date(this_elem.data('year') + "," + (this_elem.data('month') + 1) + "," + ("0" + this_elem.text()).slice(-2));

                        if (curr_date_mod.getTime() <= start_date_after_settings.getTime()) {
                            if (this_date.getTime() === curr_date_mod.getTime()) {
                                selected_dept_date = curr_date_mod;
                                $(".ui-datepicker-calendar .flight_dept_color").removeClass("flight_dept_color");
                                this_elem.addClass("flight_dept_color");
                            }
                        }

                        if (curr_date_mod.getTime() >= end_date_after_settings.getTime()) {
                            if (this_date.getTime() === curr_date_mod.getTime()) {
                                selected_return_date = curr_date_mod;
                                $(".ui-datepicker-calendar .flight_return_color").removeClass("flight_return_color");
                                this_elem.addClass("flight_return_color");
                            }
                        }

                    });
                });

            }

            $("#datepicker").datepicker({
                numberOfMonths: 2,
                dateFormat: 'yy-mm-dd',
                defaultDate: date1,
                onSelect: function(dateStr, inst) {
                    inst.inline = false;

                    var curr_date = dateStr.replace("-", ",");
                    var curr_date_mod = new Date(curr_date);

                    select_date(curr_date_mod);

                }

            });

            function must_runs() {

                load_tour_dates();

                load_selected_start_dates();
                if (selected_dept_date instanceof Date) {
                    select_date(selected_dept_date);
                }

                if (selected_return_date instanceof Date) {
                    select_date(selected_dept_date);
                }

            }

            must_runs();

            $(document).delegate('.ui-datepicker-prev', 'click', function() {
                must_runs();
            });
            $(document).delegate('.ui-datepicker-next', 'click', function() {
                must_runs();
            });



        });

---

你能缩小问题的范围并把代码写下来吗？我要么不理解，要么无法重现这个问题。你能澄清一下吗？基本上，当用户在巡演日期之前选择一个日期时，它应该是浅红色的，这是有效的。但是，如果选择了此日期，然后单击上一个月/下一个月箭头，则会出现问题。单击这些日期后，选定的红色日期将返回到初始日期。当单击上一个/下一个按钮时，有没有办法禁用此刷新行为？我想出来了。。我不得不重做代码。似乎datepicker的beforeShowDay选项没有那么好。我最后做的就是将所有调用放在datepicker小部件之外。我最终将s click事件委托给了.ui datepicker prev/next，因为这似乎效果更好。感谢那些看过并实际尝试过的人。

$(document).ready(function() {

            var selected_dept_date = "";
            var selected_return_date = "";

            var actual_start_date = "2014-10-04";
            var actual_end_date = "2014-10-20";

            var actual_end_date_DATE = new Date(actual_end_date);
            actual_end_date_DATE.setDate(actual_end_date_DATE.getDate() + 1);


            var time = "T00:00:00";
            var start_date = actual_start_date + time;
            var end_date = actual_end_date + time;

            var date1 = new Date(start_date);
            var date2 = new Date(end_date);


            var pre_nights = 5;
            var post_nights = 2;

            var pre_nights_count = pre_nights;
            var post_nights_count = post_nights;
            var msecPerDay = 24 * 60 * 60 * 1000;
            date2.setDate(date2.getDate() + 1);


            function getAllDays(d1, d2) {
                var s = new Date(d1);
                s.setHours(0, 0, 0, 0);
                var e = new Date(d2);
                e.setHours(0, 0, 0, 0);
                var a = [];
                while (s < e) {
                    a.push(s);
                    s = new Date(s.setDate(s.getDate() + 1));
                }
                return a;
            }


            var pre_night_dates_arr = [];
            var post_night_dates_arr = [];


            if (pre_nights > 0) {
                date1 = new Date(date1.getTime() - (msecPerDay * pre_nights));

                $.each(getAllDays(date1, date2), function(key, val) {
                    if (pre_nights_count > 0) {
                        pre_night_dates_arr.push(val);
                        pre_nights_count--;
                    } else {
                        return false;
                    }
                });
            }


            if (post_nights > 0) {
                date2 = new Date(date2.getTime() + (msecPerDay * post_nights));
                $.each(getAllDays(date1, date2), function(key, val) {
                    if (post_nights_count > 0) {

                        if (val.getTime() > actual_end_date_DATE.getTime()) {
                            post_night_dates_arr.push(val);
                            post_nights_count--;
                        }

                    } else {
                        return false;
                    }
                });
            }

            var start_date_after_settings = new Date(getAllDays(date1, date2)[0]);
            start_date_after_settings.setDate(start_date_after_settings.getDate() - 1);

            var end_date_after_settings = new Date($(getAllDays(date1, date2)).last()[0]);
            end_date_after_settings.setDate(end_date_after_settings.getDate() + 1);


            function load_tour_dates() {
                $(".ui-state-active").removeClass("ui-state-active");
                $('.ui-datepicker-group').each(function() {
                    $(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function() {
                        var this_elem = $(this);
                        var this_date = new Date(this_elem.data('year') + "," + (this_elem.data('month') + 1) + "," + ("0" + this_elem.text()).slice(-2));
                        $.each(getAllDays(date1, date2), function(key, val) {

                            if (pre_night_dates_arr.length > 0) {
                                $.each(pre_night_dates_arr, function(key2, val2) {
                                    if (this_date.getTime() == val2.getTime()) {
                                        this_elem.addClass("extra_nights_color");
                                    }
                                });
                            }

                            if (this_date.getTime() == val.getTime()) {
                                this_elem.addClass("tour_dates_color");
                                return false;
                            }

                            if (post_night_dates_arr.length > 0) {
                                $.each(post_night_dates_arr, function(key2, val2) {
                                    if (this_date.getTime() == val2.getTime()) {
                                        this_elem.addClass("extra_nights_color");
                                    }
                                });
                            }

                        });
                    });
                });
            }

            function load_selected_start_dates() {

                $('.ui-datepicker-group').each(function() {
                    $(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function() {
                        var this_elem = $(this);
                        var this_date = new Date(this_elem.data('year') + "," + (this_elem.data('month') + 1) + "," + ("0" + this_elem.text()).slice(-2));
                        if (selected_dept_date instanceof Date) {
                            if (this_date.getTime() == selected_dept_date.getTime()) {
                                this_elem.addClass("flight_dept_color");
                            }
                        } else {
                            if (this_date.getTime() == start_date_after_settings.getTime()) {
                                this_elem.addClass("flight_dept_color");
                            }
                        }

                        if (selected_return_date instanceof Date) {
                            if (this_date.getTime() == selected_return_date.getTime()) {
                                this_elem.addClass("flight_return_color");
                            }
                        } else {
                            if (this_date.getTime() == end_date_after_settings.getTime()) {
                                this_elem.addClass("flight_return_color");
                            }
                        }
                    });
                });


            }

            function select_date(date) {

                var curr_date_mod = new Date(date);

                $('.ui-datepicker-group').each(function() {
                    $(this).find('.ui-datepicker-calendar tbody td:has(a)').each(function() {
                        var this_elem = $(this);
                        var this_date = new Date(this_elem.data('year') + "," + (this_elem.data('month') + 1) + "," + ("0" + this_elem.text()).slice(-2));

                        if (curr_date_mod.getTime() <= start_date_after_settings.getTime()) {
                            if (this_date.getTime() === curr_date_mod.getTime()) {
                                selected_dept_date = curr_date_mod;
                                $(".ui-datepicker-calendar .flight_dept_color").removeClass("flight_dept_color");
                                this_elem.addClass("flight_dept_color");
                            }
                        }

                        if (curr_date_mod.getTime() >= end_date_after_settings.getTime()) {
                            if (this_date.getTime() === curr_date_mod.getTime()) {
                                selected_return_date = curr_date_mod;
                                $(".ui-datepicker-calendar .flight_return_color").removeClass("flight_return_color");
                                this_elem.addClass("flight_return_color");
                            }
                        }

                    });
                });

            }

            $("#datepicker").datepicker({
                numberOfMonths: 2,
                dateFormat: 'yy-mm-dd',
                defaultDate: date1,
                onSelect: function(dateStr, inst) {
                    inst.inline = false;

                    var curr_date = dateStr.replace("-", ",");
                    var curr_date_mod = new Date(curr_date);

                    select_date(curr_date_mod);

                }

            });

            function must_runs() {

                load_tour_dates();

                load_selected_start_dates();
                if (selected_dept_date instanceof Date) {
                    select_date(selected_dept_date);
                }

                if (selected_return_date instanceof Date) {
                    select_date(selected_dept_date);
                }

            }

            must_runs();

            $(document).delegate('.ui-datepicker-prev', 'click', function() {
                must_runs();
            });
            $(document).delegate('.ui-datepicker-next', 'click', function() {
                must_runs();
            });



        });