JQuery datepicker - 2 ввода/текстовые поля и ограничивающий диапазон

Я использую виджет jQuery Datepicker с двумя полями ввода, один для даты "От" , а второй с датой "Кому" . Я использую функциональную демонстрацию jQuery Datepicker в качестве основы для того, чтобы заставить два поля ввода работать друг с другом, но мне нужно иметь возможность добавлять эти дополнительные ограничения:

  • Диапазон дат может быть не раньше 01 декабря 2008 г.

  • "Кому" дата не может быть   позже сегодня

  • Как только "От"   , значение "Кому" может   быть в пределах 7 дней после    "От" date

  • Если дата "Кому"   выбранный первым, затем "От"   может находиться только в пределах 7   дней до даты "Кому" (с   предел 01 декабря - первый   выбираемая дата)

Я не могу заставить все это работать вместе.

В целом, я хотел бы иметь возможность выбрать диапазон до 7 дней с 01 декабря по сегодняшний день (я понимаю, что я публикую это 1 декабря, так что будет только сегодня на данный момент).

Мой код пока

$(function () {

$('#txtStartDate, #txtEndDate').datepicker(
            {
            showOn: "both",
            beforeShow: customRange,
            dateFormat: "dd M yy",
            firstDay: 1, 
            changeFirstDay: false
            });
});

function customRange(input) 
{ 

return {
         minDate: (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : null),
         minDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null), 
         maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null)
       }; 
}

Мне не хватает ограничения на 7-дневный диапазон, а также предотвращение выбора даты "Кому" до 01 декабря 2008 года или после сегодняшнего дня. Любая помощь будет очень признательна, спасибо.

ОТВЕТЫ

Ответ 1

Большое спасибо за вашу помощь Бен, я построил на твоих постах и ​​придумал это. Теперь он завершен и работает блестяще!

Здесь Рабочий демонстрационный пример. Добавьте /edit к 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
    };     
}

Ответ 2

Хорошо, как насчет этого:

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
   }; 

}

Это лучшее, что я мог придумать, чтобы удовлетворить все ваши требования (я думаю...)

Ответ 3

Я понимаю, что немного опаздываю на вечеринку, но вот как я изменил рабочий пример кода. Мне не нужно было устанавливать максимальную и минимальную дату, просто не нужно перекрывать диапазон дат, поэтому я просто позволяю им устанавливать друг друга:

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")
    };
  }
}

(Мои финалисты уже были инициализированы в script дальше, но это только настройки по умолчанию.)

Кажется, нужно сделать то, что мне нужно, чтобы:)

Смотрите здесь для моего примера.

Ответ 4

Рассмотрим использование rangeSelect, чтобы иметь один элемент управления вместо двух.

Чтобы добиться того, что вам нужно, я полагаю, вам нужно добавить слушателя onSelect, а затем вызвать datepicker( "option", settings ), чтобы изменить настройки.

Ответ 5

Дата начала 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, я получаю выбранный диапазон дат в день, который я выбрал, плюс следующий.

Ответ 6

Вот решение, с которым я столкнулся после многократного поиска решения того, что, по моему мнению, является общей проблемой. Это эффективно "отскакивает" входы вокруг общего диапазона ввода совместимых дней. Значение - если у меня есть два поля, то один может быть использован для ограничения другого, а другой может переопределить оригинал, если это необходимо. Цель состоит в том, чтобы всегда гарантировать, что между двумя полями существует только конечный диапазон дней (или месяцев или что-то еще). Этот конкретный пример также ограничивает время в будущем тем, что что-то можно выбрать в любом поле (например, 3 месяца).


$("#startdate").datepicker({
   minDate: '+5', 
   maxDate: '+3M',
   changeMonth: true,
   showAnim: 'blind',
   onSelect: function(dateText, inst){ 

    // Capture the Date from User Selection
    var oldDate = new Date(dateText);
    var newDate = new Date(dateText);

    // Compute the Future Limiting Date
    newDate.setDate(newDate.getDate()+5);


    // Set the Widget Properties
    $("#enddate").datepicker('option', 'minDate', oldDate);
    $("#enddate").datepicker('option', 'maxDate', newDate);

    }
  });

 $("#enddate").datepicker({
  minDate: '+5',
  maxDate: '+3M',
  changeMonth: true,
  showAnim: 'blind', 
  onSelect: function(dateText, inst){ 

    // Capture the Date from User Selection
    var endDate = new Date(dateText);
    var startDate = new Date(dateText);

    // Compute the Future Limiting Date
    startDate.setDate(startDate.getDate()-5);

    // Set the Widget Properties
    $("#startdate").datepicker('option', 'minDate', startDate);
    $("#startdate").datepicker('option', 'maxDate', endDate);

    }

  });

Ответ 7

вот как я его использую:

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

Ответ 8

Вот как я это сделал. Я взял источник с веб-сайта JQuery и изменил его, чтобы добавить ваши ограничения.

$(document).ready(function ()
{      
  var dates = $('#StartDate, #EndDate').datepicker({
        minDate: new Date(2008, 11, 1), 
        maxDate: "+0D",
        dateFormat: "dd M yy",
        changeMonth: true,
        changeYear: true,
        onSelect: function (selectedDate)
        {
            var option = this.id == "StartDate" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings);
            var edate;
            var otherOption;
            var d;
            if (option == "minDate")
            {
                otherOption = "maxDate";
                d = date.getDate() + 7;
            }
            else if (option == "maxDate")
            {
                otherOption = "minDate";
                d = date.getDate() - 7;
            }

            var m = date.getMonth();
            var y = date.getFullYear();
            edate = new Date(y, m, d);

            dates.not(this).datepicker("option", option, date);
            dates.not(this).datepicker("option", otherOption, edate);
        }
    });
});

Начальная идея от: http://jqueryui.com/demos/datepicker/#date-range

Примечание: Вам также понадобится опция reset/очистить даты (т.е. если пользователь выбирает "Дата", "Дата" становится ограниченной. From date ", если пользователь теперь выбирает" Дата ", дата даты также ограничена. Необходимо иметь четкую возможность разрешить пользователю выбирать другую дату" От ".)