it-swarm.com.ru

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

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

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

  2. Дата "До" может быть не позднее, чем сегодня

  3. После выбора даты "От" , "До" может быть в течение 7 дней после даты "От"

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

Я не могу заставить все вышеперечисленное работать вместе.

Таким образом, я хотел бы иметь возможность выбрать диапазон до 7 дней в период с 1 декабря по сегодняшний день (я понимаю, что я публикую это 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-дневное ограничение диапазона и также не могу выбрать дату "До" до 1 декабря 2008 года или после сегодняшнего дня. Любая помощь будет высоко ценится, спасибо.

51
Russ Cam

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

Вот Рабочая демоверсия. Добавьте /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
    };     
}
49
Russ Cam

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

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

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

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

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

14
Robin Duckett

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

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

}

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

14
Ben Koehler

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

4
Ben Koehler

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

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

4
kgiannakakis

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

    }

  });
4
David Bigelow

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

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

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

$(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

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

0
escist