jQuery Datepicker - ограничение minDate в соответствии с предыдущим календарем

Question

У меня есть 2 указателя даты:

$(function() {
    $( "#datepicker1, #datepicker2" ).datepicker({
    minDate: 'today',
    maxDate: "+90D",
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    dateFormat: "D, dd MM, yy"
    });
});

Я хочу, чтобы в datepicker2 было выбрано минимальное значение даты в первом календаре + 1 день (т. Е. Если первая календарная дата была 16 мая, во втором календаре должна быть установлена ​​минимальная дата 17 мая)

Answer 1

У меня был такой же сценарий. Я установил значение minDate для второго указателя даты в обработчике события select первого указателя даты. Работал как шарм.

РЕДАКТИРОВАТЬ: Вот пример:

$("#datepicker1").datepicker({
    //normal setup parameters here
    onSelect: function (dateValue, inst) {
        $("#datepicker2").datepicker("option", "minDate", dateValue)
    }
});

Answer 2

Подробные ответы здесь на самом деле не отвечают на вопрос, который был «как установить minDate второго DatePicker на значение первого DatePicker + 1 DAY»?

Это может быть слишком поздно для вас, но так как я изо всех сил пытался найти решение, вот оно:

$(function() {
    $( "#datepicker1" ).datepicker({
        minDate: 'today',
        maxDate: "+90D",
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        dateFormat: "D, dd MM, yy"
        onClose: function(selectedDate, inst) {
            var selected_date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
            new_date = new Date(selected_date.getTime() + 86400000);
            new_date = jQuery.datepicker.formatDate('dd/mm/yy', new_date);
            $( "#datepicker2" ).datepicker( "option", "minDate", new_date);
  }
    });
});

Пояснения:

Вы должны получить объект Date из поля datepicker1 с указанием года, месяца, дня.

Затем вы вызываете этот объект Date и преобразуете его в метку времени UNIX, к которой добавляете 86400000 (количество микросекунд в одном дне). Который дает вам новый объект Date.

После этого вы только что отформатировали объект Date, который вы только что создали, для правильного отображения (который может не совпадать с представленным в этом ответе), вызвав formatDate метод jQuery DatePicker API.

В конце вы применяете minDate вашего поля datepicker2 с вашей новой_датой.

Answer 3

$(document).ready(function(){ 
    $("#txtStartDate").datepicker({
    //pick the first date and must not max today
        dateFormat: 'dd/mm/yy',
        changeYear: true,
        maxDate: '+0D', 
    onSelect: function (dateValue){
        //onselect set the min of txtEndDate to be the current txtStartDate value
        $("#txtEndDate").datepicker({ 
        dateFormat: 'dd/mm/yy',
        changeYear: true,
        minDate: dateValue,
        maxDate: '+0D', 
    });
    }
});
});

Answer 4

Попробуйте: у меня отлично работает

$("#datepicker1").datepicker({
    //normal setup parameters here
    onSelect: function(date) {
              var           minDateObject= new Date();//compose the date you want to set
          $( "#datepicker2" ).datepicker( "option", "minDate",minDateObject );
    }   
   });

Надеюсь, будет полезным.Спасибо.

Answer 5

Вы должны инициализировать оба указателя даты.

$(document).ready(function(){    
    var dateToday=new Date();
    $("#datepicker2").datepicker();
    $("#datepicker1").datepicker({  
      minDate: dateToday,   
      onSelect:function(ui, event) { $('#datepicker2').datepicker("option","minDate",ui);}  
      });
});

Answer 6

Вот еще одно решение.В этом контексте я использую «Date From» и «Date To» в качестве текста по умолчанию в DatePicker.

$(function () {
        $("#DateFrom").datepicker({

            maxDate: new Date(new Date($('#DateTo').val()).valueOf()),
            beforeShow: function () {
                if ($("#DateFrom").val() == "Date From" && $("#DateTo").val() == "Date To") {
                    $("#DateFrom").datepicker('option', { minDate: null, maxDate: null });
                }

            },
            onSelect: function (dateText, inst) {
                var currentDate = new Date(dateText);
                var valueofcurrentDate = currentDate.valueOf();
                var newDate = new Date(valueofcurrentDate);
                $("#DateTo").datepicker("option", "minDate", newDate);


            }

        });

        $("#DateTo").datepicker({

            minDate: new Date(new Date($('#DateTo').val()).valueOf()),
            beforeShow: function () {
                if ($("#DateFrom").val() == "Date From" && $("#DateTo").val() == "Date To") {
                    $("#DateTo").datepicker('option', { minDate: null, maxDate: null });
                }

            },
            onSelect: function (dateText, inst) {
                var currentDate = new Date(dateText);
                var valueofcurrentDate = currentDate.valueOf();
                var newDate = new Date(valueofcurrentDate);
                $("#DateFrom").datepicker("option", "maxDate", newDate);



            }

        });



 //checking for key combinations which are allowed

        $("#DateFrom").keypress(function (e) {
            switch (e.keyCode) {
                case 46:  // delete                      
                case 8:  // backspace                       
                    break;
                default:
                    e.preventDefault();
                    break;
            }
        });

        $("#DateTo").keypress(function (e) {
            switch (e.keyCode) {
                case 46:  // delete                      
                case 8:  // backspace                      
                    break;
                default:
                    e.preventDefault();
                    break;
            }
        });
    });

Answer 7

Я бы порекомендовал DateRange Picker из Filament Group: http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

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

Answer 8

Посмотрите на пример диапазона: http://jqueryui.com/demos/datepicker/#date-range