Диапазон даты печати не работает

Я пытаюсь создать диапазон дат, который после выбора start_dateend_date позволит пользователям выбирать даты после start_date и наоборот. Ниже представлен фрагмент кода:Диапазон даты печати не работает

main.js 
function set_parameters() { 
    var date_start_input=$('#start_date'); 
    var date_end_input=$('#end_date'); 
    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; 
    var options_start={ 
     format: 'MM dd, yyyy', 
     container: container, 
     todayHighlight: true, 
     autoclose: true, 
     orientation: 'top left', 
     onSelect: function(selectedDate) { 
     date_end_input.datepicker("option", "maxDate", selectedDate); 
     } 
    }; 
    var options_end={ 
     format: 'MM dd, yyyy', 
     container: container, 
     todayHighlight: true, 
     autoclose: true, 
     orientation: 'top left', 
     onSelect: function(selectedDate) { 
     date_start_input.datepicker("option", "minDate", selectedDate); 
     } 
    }; 
    date_start_input.datepicker(options_start); 
    date_end_input.datepicker(options_end); 
}; 

$(document).ready(function() { 
    set_parameters(); 
}); 

index.html 
<head> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> 
</head> 
... 
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/> 
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/> 
...

Я пробовал решения из нескольких тем, но никто из них не работал для меня. Я считаю, что самое главное - установить максимальную и минимальную дату, когда изменения будут сделаны в датах.

источник

2016-10-26 Godric

Вы пробовали обменивать, где вы используете "MaxDate" и "MinDate"? – HarlemSquirrel

Не работает. Фактически, все работает с подбором даты, но мин/макс. – Godric

Существует несколько ошибок в коде:

DatePicker не имеет опцию onSelect, вместо этого вы должны слушать changeDate события
DatePicker не имеет ни minDate, ни maxDate опции/метод, вы должны использовать setStartDate и setEndDate

Вот рабочий пример:

function set_parameters() { 
 
    var date_start_input = $('#start_date'); 
 
    var date_end_input = $('#end_date'); 
 
    var container = $('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; 
 
    
 
    var options = { 
 
    format: 'MM dd, yyyy', 
 
    container: container, 
 
    todayHighlight: true, 
 
    autoclose: true, 
 
    orientation: 'top left' 
 
    }; 
 

 
    date_start_input.datepicker(options).on('changeDate', function(e){ 
 
    date_end_input.datepicker("setStartDate", e.date); 
 
    }); 
 
    date_end_input.datepicker(options).on('changeDate', function(e){ 
 
    date_start_input.datepicker("setEndDate", e.date); 
 
    }); 
 
}; 
 

 
$(document).ready(function() { 
 
    set_parameters(); 
 
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> 
 

 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> 
 

 
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/> 
 
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>

источник

2016-10-26 18:43:32 VincenzoC

Он работает! Спасибо! – Godric

Я думаю, что код вам нужно это:

<div class="container"> 
<div class='col-md-5'> 
    <div class="form-group"> 
     <div class='input-group date' id='datetimepicker6'> 
      <input type='text' class="form-control" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</div> 
<div class='col-md-5'> 
    <div class="form-group"> 
     <div class='input-group date' id='datetimepicker7'> 
      <input type='text' class="form-control" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</div> 
</div> 
<script type="text/javascript"> 
$(function() { 
    $('#datetimepicker6').datetimepicker(); 
    $('#datetimepicker7').datetimepicker({ 
     useCurrent: false //Important! See issue #1075 
    }); 
    $("#datetimepicker6").on("dp.change", function (e) { 
     $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
    }); 
    $("#datetimepicker7").on("dp.change", function (e) { 
     $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
    }); 
}); 
</script>

Это не мой код. Я нашел его здесь: https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers.

источник

2016-10-26 16:48:48 Thanasis

К сожалению, это не работает. – Godric

Похоже, может быть, вы просто не хватает закрывающей скобки в документе ГОТОВ функцию

$(document).ready(function() { 
    set_parameters(); 
}

function set_parameters() { 
 
    var date_start_input=$('#start_date'); 
 
    var date_end_input=$('#end_date'); 
 
    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; 
 
    var options_start={ 
 
     format: 'MM dd, yyyy', 
 
     container: container, 
 
     todayHighlight: true, 
 
     autoclose: true, 
 
     orientation: 'top left', 
 
     onSelect: function(selectedDate) { 
 
     date_end_input.datepicker("option", "maxDate", selectedDate); 
 
     } 
 
    }; 
 
    var options_end={ 
 
     format: 'MM dd, yyyy', 
 
     container: container, 
 
     todayHighlight: true, 
 
     autoclose: true, 
 
     orientation: 'top left', 
 
     onSelect: function(selectedDate) { 
 
     date_start_input.datepicker("option", "minDate", selectedDate); 
 
     } 
 
    }; 
 
    date_start_input.datepicker(options_start); 
 
    date_end_input.datepicker(options_end); 
 
}; 
 

 
$(document).ready(function() { 
 
    set_parameters(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 

 
<head> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> 
 
</head> 
 
... 
 
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/> 
 
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>

Вы также можете прочитать больше о jQuery UI Datepicker here, если вы еще не знаете об этом.

источник

2016-10-26 16:53:04 HarlemSquirrel

Прошу прощения, я только что заметил ошибку. Я не скопировал скобки. – Godric

Диапазон даты печати не работает

ответ

Смежные вопросы