Изменение minDate / startDate начальной загрузки с другого datepicker

На моей странице есть два datepickers, и оба они бутстрап. Условие состоит только в том, чтобы дата начала никогда не была высокой по сравнению с датой окончания. Означает, что Атрибут даты окончания (minDate) должен быть изменен, когда Дата начала изменена с помощью datepicker, и то же самое, что и при изменении даты окончания, минимальный диапазон календаря DatePicker даты начала должен соответствовать значению даты окончания.

Я надеюсь ты понимаешь мою проблему

$(document).ready(function(){
  
      $("#startdate").datepicker({
       
        todayBtn:  1,
        autoclose: true,
       
       
      }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        $('#enddate').datetimepicker('setStartDate', minDate);
    });
    
        $("#enddate").datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">



<input type="text" placehoder="Start Date" id="startdate"/>
<input type="text" placehoder="End Date" id="enddate"/>


javascript jquery twitter-bootstrap bootstrap-datepicker
person vikujangid    schedule 26.05.2015    source источник
comment
пожалуйста, подумайте о том, чтобы перефразировать свой вопрос / поставить примеры, вы получите больше ответов :)   -  person Dory Zidon    schedule 26.05.2015
comment
Вы вызываете неправильный метод datetimepicker в строке $('#enddate').datetimepicker('setStartDate', minDate);   -  person pqdong    schedule 26.05.2015
comment
Хорошо, тогда какой метод правильный?   -  person vikujangid    schedule 26.05.2015

Ответы (2)


arrow_upward
85
arrow_downward

Я заставил jsfiddle делать то, что вы хотите. Как прокомментировал pqdong, вы вызывали datetimepicker вместо datepicker при установке даты окончания.

Вот рабочий javascript:

$(document).ready(function(){

    $("#startdate").datepicker({
        todayBtn:  1,
        autoclose: true,
    }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        $('#enddate').datepicker('setStartDate', minDate);
    });

    $("#enddate").datepicker()
        .on('changeDate', function (selected) {
            var maxDate = new Date(selected.date.valueOf());
            $('#startdate').datepicker('setEndDate', maxDate);
        });

});
person Razzildinho    schedule 26.05.2015
comment
Хорошее решение! Что, если я хочу установить дляStartDate значение selected.date плюс 5 дней? Спасибо, - person sidpat; 20.12.2016
comment
@sidpat Вы можете добавить к значению 5 дней несколькими способами. Вероятно, проще всего сделать следующее: var minDate = new Date(selected.date.valueOf() + (1000 * 60 * 60 * 24 * 5)); - person Razzildinho; 20.12.2016
comment
Ты спас меня ... Большое тебе спасибо - person Rush.2707; 28.12.2016
comment
@Razzildinho, как установить minDate в загрузчике datepicker ?? - person PHP Ninja; 18.01.2017
comment
@Gulshan Вам не подходит приведенный выше код? $('#enddate').datepicker('setStartDate', minDate); В этой строке должна быть установлена ​​минимальная дата для вашего datepicker. - person Razzildinho; 18.01.2017
comment
@Razzildinho, у меня есть решение ... я хочу установить сегодняшнюю дату как дату начала :) - person PHP Ninja; 18.01.2017
comment
Я просто использую var minDate = new Date(selected.date);, и он отлично работает. Мне просто любопытно, valueOf() нужно? - person Sam; 23.09.2019

arrow_upward
7
arrow_downward

У меня недостаточно репутации, чтобы прокомментировать отличный ответ Раззильдиньо, но я хотел предложить одно небольшое дополнение, которое поможет пользователям, а именно выделить выбранный день во втором окне выбора даты. Вы можете сделать это, добавив эту строку:

$('#enddate').datepicker('setDate', minDate);

В контексте это будет выглядеть так:

$(document).ready(function(){

$("#startdate").datepicker({
    todayBtn:  1,
    autoclose: true,
}).on('changeDate', function (selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#enddate').datepicker('setStartDate', minDate);
    $('#enddate').datepicker('setDate', minDate); // <--THIS IS THE LINE ADDED
});

$("#enddate").datepicker()
    .on('changeDate', function (selected) {
        var maxDate = new Date(selected.date.valueOf());
        $('#startdate').datepicker('setEndDate', maxDate);
    });

});
person Sharky Laguana    schedule 19.02.2018
comment
Хороший. Я использовал это в своем приложении. Прекрасно работает. - person arc_shiva; 26.03.2019