单击上一个/下个月时，停止刷新jQuery Datepicker
我遇到以下问题：我使用jQuery Datepicker，以便用户可以选择航班日期。我面临的唯一问题是，当用户选择日期，然后单击顶部箭头以转到previos或下个月，然后用户选择的日期（红色）返回到原始日期。我怎样才能解决这个问题？请帮忙。我正在提供小提琴：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();
});
});
1 个答案:
答案 0 :(得分：0)
我提出了这个解决方案。谢谢无论谁花时间看这个。如果您能够更好地修改此代码，请告诉我。
$(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上一个/下个月的日期可选择
- 捕获用户是否在jQuery datepicker中单击了上个月或下个月
- jQuery Datepicker：用户下个月或上个月？
- 停止自动输入下一个/上个月的Datetimepicker
- 当前，上个月和下个月日历显示在日期选择器中
- jquery datepicker确定下个月点击的第一个显示日期
- 单击上一个/下个月时，停止刷新jQuery Datepicker
- 如何在点击上一个/下个月时停止刷新javascript datepicker？
- Jquery Datepicker从当前月份中删除上个月或下个月的天数
- Gijgo Datepicker上个月和下个月的图标更改
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？