停止jQuery Datepicker刷新時點擊前一個/下一個月

Question

我有以下問題：我使用jQuery Datepicker，以便用戶可以選擇航班日期。我面臨的唯一問題是，當用戶選擇日期，然後單擊頂部箭頭以轉到上一個月或下一個月，然後用戶選擇的日期（紅色）返回原始。我怎樣才能解決這個問題？請幫忙。我提供一個小提琴：FIDDLE HERE

$(document).ready(function() { 

    var start_date = "2014-10-04"; 
    var end_date = "2014-10-20"; 
    var date1 = new Date(start_date); 
    var date2 = new Date(end_date); 
    var actual_end_date = new Date(end_date); 
    actual_end_date.setDate(actual_end_date.getDate() + 2); 
    var pre_nights = 1; 
    var post_nights = 2; 
    var msecPerDay = 24 * 60 * 60 * 1000; 
    date2.setDate(date2.getDate() + 1); 
    if (post_nights > 0) { 
     date2 = new Date(date2.getTime() + (msecPerDay * post_nights)); 
    } 


    var flight_end = new Date(date2.getTime() + msecPerDay); 
    if (pre_nights > 0) { 
     date1 = new Date(date1.getTime() - (msecPerDay * pre_nights)); 
    } 



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

    function date_check() { 
     $(".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).data('year') + "-" + ($(this).data('month') + 1) + "-" + $(this).text()); 
       var this_end_date = new Date(this_date); 
       this_end_date.setDate(this_end_date.getDate() + 1); 
       var current_this_end_date = this_end_date.getFullYear() + "-" + (this_end_date.getMonth() + 1) + "-" + ("0" + this_end_date.getDate()).slice(-2); 

       var current_day = this_date.getFullYear() + "-" + (this_date.getMonth() + 1) + "-" + ("0" + this_date.getDate()).slice(-2); 

       if (pre_night_dates_arr.length > 0 || post_night_dates_arr.length > 0) { 
        $.each(pre_night_dates_arr, function (key, val) { 
         if (current_day === val) { 
          this_elem.addClass("extra_nights_color"); 
         } 
        }); 
        $.each(post_night_dates_arr, function (key, val) { 
         if (current_this_end_date === val) { 
          this_elem.addClass("extra_nights_color"); 
         } 
        }); 
       } 


      }); 
     }); 
    } 

    $("#datepicker").datepicker({ 
     numberOfMonths: 2, 
     dateFormat: 'yy-mm-dd', 
     defaultDate: date1, 
     beforeShowDay: function (date) { 
      var current_day = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + ("0" + date.getDate()).slice(-2); 
      var flight_start = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + ("0" + date1.getDate()).slice(-2); 
      var flight_end_mod = flight_end.getFullYear() + "-" + (flight_end.getMonth() + 1) + "-" + ("0" + flight_end.getDate()).slice(-2); 
      if (current_day == flight_start) { 
       var arr = [true, "flight_dept_color"]; 
      } else if (date > date1 && date < date2) { 
       if (pre_nights > 0) { 
        pre_night_dates_arr.push(current_day); 
        pre_nights--; 
        var arr = [true, "extra_nights_color"]; 
       } else if (post_nights > 0) { 
        var flight_end_date = new Date(flight_end); 
        flight_end_date.setDate(flight_end_date.getDate() - post_nights); 
        var flight_end_date_mod = flight_end_date.getFullYear() + "-" + (flight_end_date.getMonth() + 1) + "-" + ("0" + flight_end_date.getDate()).slice(-2); 
        if (current_day == flight_end_date_mod) { 
         post_night_dates_arr.push(current_day); 
         post_nights--; 
         var arr = [true, "extra_nights_color"]; 
        } else { 
         var arr = [true, "tour_dates_color"]; 
        } 

       } else { 
        var arr = [true, "tour_dates_color"]; 
       } 
      } else if (current_day == flight_end_mod) { 
       var arr = [true, "flight_return_color"]; 
      } else { 
       var arr = [true, ""]; 
      } 
      return arr; 
     }, 
     onSelect: function (dateStr, inst) { 
      inst.inline = false; 
      date_check(); 
      console.log("test"); 
      $(".ui-datepicker-calendar tbody td:has(a)").each(function() { 

       var this_date = $(this).data('year') + "-" + ("0" + ($(this).data('month') + 1)).slice(-2) + "-" + ("0" + $(this).text()).slice(-2); 
       var date2_mod = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + ("0" + date2.getDate()).slice(-2); 

       if (pre_night_dates_arr.length > 0) { 
        if (this_date < pre_night_dates_arr[0]) { 
         if (this_date == dateStr) { 
          $(".ui-datepicker-calendar .flight_dept_color").removeClass("flight_dept_color"); 
          $(this).addClass("flight_dept_color"); 
         } 
        } else if (this_date > date2_mod) { 
         if (this_date == dateStr) { 
          $(".ui-datepicker-calendar .flight_return_color").removeClass("flight_return_color"); 
          $(this).addClass("flight_return_color"); 
         } 
        } 
       } else { 
        var flight_start = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + ("0" + date1.getDate()).slice(-2); 
        if (this_date <= flight_start) { 
         if (this_date == dateStr) { 
          $(".ui-datepicker-calendar .flight_dept_color").removeClass("flight_dept_color"); 
          $(this).addClass("flight_dept_color"); 
         } 
        } else if (this_date > date2_mod) { 
         if (this_date == dateStr) { 
          $(".ui-datepicker-calendar .flight_return_color").removeClass("flight_return_color"); 
          $(this).addClass("flight_return_color"); 
         } 
        } 
       } 


      }); 
     } 

    }); 
    date_check(); 
    $('.ui-corner-all').on('click', function (e) { 
     date_check(); 
    }); 
}); 

Answer 1

我想出了這個解決方案。感謝無論誰花時間來看這個。讓我知道你是否可以更好地修改這段代碼。

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



     });