jQuery datepicker-2 исходных данных/текстовых поля и ограничивающий диапазон
6 ответов
Большое спасибо за Вашу справку Ben, я положился на Ваши сообщения и придумал это. Это теперь завершено и работает блестяще!
Вот Рабочая Демонстрация . Добавьте редактирование / к URL для наблюдения кода
Полный Код ниже -
$(function ()
{
$('#txtStartDate, #txtEndDate').datepicker({
showOn: "both",
beforeShow: customRange,
dateFormat: "dd M yy",
firstDay: 1,
changeFirstDay: false
});
});
function customRange(input) {
var min = new Date(2008, 11 - 1, 1), //Set this to your absolute minimum date
dateMin = min,
dateMax = null,
dayRange = 6; // Set this to the range of days you want to restrict to
if (input.id === "txtStartDate") {
if ($("#txtEndDate").datepicker("getDate") != null) {
dateMax = $("#txtEndDate").datepicker("getDate");
dateMin = $("#txtEndDate").datepicker("getDate");
dateMin.setDate(dateMin.getDate() - dayRange);
if (dateMin < min) {
dateMin = min;
}
}
else {
dateMax = new Date; //Set this to your absolute maximum date
}
}
else if (input.id === "txtEndDate") {
dateMax = new Date; //Set this to your absolute maximum date
if ($("#txtStartDate").datepicker("getDate") != null) {
dateMin = $("#txtStartDate").datepicker("getDate");
var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + dayRange);
if(rangeMax < dateMax) {
dateMax = rangeMax;
}
}
}
return {
minDate: dateMin,
maxDate: dateMax
};
}
Хорошо, как насчет этого:
function customRange(input)
{
var min = new Date(2008, 12 - 1, 1);
var dateMin = min;
var dateMax = null;
if (input.id == "txtStartDate" && $("#txtEndDate").datepicker("getDate") != null)
{
dateMax = $("#txtEndDate").datepicker("getDate");
dateMin = $("#txtEndDate").datepicker("getDate");
dateMin.setDate(dateMin.getDate() - 7);
if (dateMin < min)
{
dateMin = min;
}
}
else if (input.id == "txtEndDate")
{
dateMax = new Date();
if ($("#txtStartDate").datepicker("getDate") != null)
{
dateMin = $("#txtStartDate").datepicker("getDate");
dateMax = $("#txtStartDate").datepicker("getDate");
dateMax.setDate(dateMax.getDate() + 7);
}
}
return {
minDate: dateMin,
maxDate: dateMax
};
}
Это является лучшим, я мог придумать, который отвечал всем Вашим требованиям (я думаю...)
Рассмотрите использование rangeSelect, чтобы иметь один контроль вместо два.
Для достижения, что Вы после я предполагаю, что необходимо добавить onSelect слушателя и затем звонить datepicker( "option", settings ) для изменения настроек.
Ваша дата начала txtStartDate не работает, потому что Ваш второй minDate устанавливается в NULL, когда это проверяет input.id во второй раз. Кроме того, maxDate должен проверять на txtEndDate, не txtStartDate. Попробуйте это:
function customRange(input)
{
var mDate = (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : $("#txtStartDate").datepicker("getDate"));
return {
minDate: mDate,
maxDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate").getDate() + 5 : null)
};
}
я не знаю, почему '+ 5' вместо '+ 7', но если я добавляю 0, я получаю выбираемый диапазон дат дня, который я выбрал плюс следующее.
вот как я его использую:
function customRange(input)
{
var min = new Date();
return {
minDate: ((input.id == "txtStartDate") ? min : (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null)),
maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null)
};
}
Я понимаю, что немного опоздал, но вот как я изменил код рабочего примера. Мне не нужно было устанавливать конкретную максимальную и минимальную дату, просто не хотелось, чтобы диапазон дат перекрывался, поэтому я просто позволил им установить друг друга:
jQuery(function() {
jQuery('#calendardatetime_required_to, #calendardatetime_required_from').datepicker('option', {
beforeShow: customRange
});
});
function customRange(input) {
if (input.id == 'calendardatetime_required_to') {
return {
minDate: jQuery('#calendardatetime_required_from').datepicker("getDate")
};
} else if (input.id == 'calendardatetime_required_from') {
return {
maxDate: jQuery('#calendardatetime_required_to').datepicker("getDate")
};
}
}
(Мои датапикеры уже были инициализированы в скрипте выше, но это просто настройки по умолчанию.)
Кажется, делает то, что мне нужно :)
Смотрите здесь для моего примера.