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

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

51 голосов
/ 01 декабря 2008

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

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

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

  3. Однажды "От" дата может быть выбрана только дата «До» быть в пределах 7 дней после «От» дата

  4. Если «К» дата сначала выберите, затем "From" date может быть только в пределах 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-дневное ограничение диапазона, а также запрещаю «До» выбора даты до 01 декабря 2008 года или после сегодняшнего дня. Любая помощь будет высоко ценится, спасибо.

Ответы [ 8 ]

49 голосов
/ 02 декабря 2008

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

Вот вам Рабочая демоверсия . Добавьте / 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
    };     
}
14 голосов
/ 10 июня 2010

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

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 голосов
/ 02 декабря 2008

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

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

}

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

4 голосов
/ 02 октября 2010

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

Ваша начальная дата для 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 голосов
/ 01 декабря 2008

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

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

3 голосов
/ 16 февраля 2010

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

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)
    };
}
0 голосов
/ 13 марта 2012

Вот как я это сделал. Я взял источник с веб-сайта 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

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

...