Невозможно выбрать вторую дату в DatePicker - PullRequest
Новая
       54

Невозможно выбрать вторую дату в DatePicker

0 голосов
/ 21 сентября 2019

У меня есть поле даты, в котором выбираются «Дата начала» и «Дата окончания». Что я хотел сделать, это отключить предыдущую дату и отображать текущую дату в поле «Дата начала» и в поле «Дата окончания»,Я хочу показать +3 дня, не более того.Я написал свой код, но он работает только в том случае, если я выбираю сегодняшнюю дату, если я выбираю, например, 25 сентября, тогда все даты в «Дата окончания» отключаются.Вот мой код: 

<div class="row-form clearfix">
<div class="span5">Free Trail Date:</div>
<div class="span7">
<input  value=""  placeholder="From" style="width: 96px;" type="text" name="ftdt" id="dob" required/>
<input  value=""  placeholder="To" style="width: 96px;" type="text" name="ft_snd" id="dob2" required/>
</div>
</div>

Код JavaScript: 

<script>
    $(function() {
        $('#dob').datepicker({
        changeMonth: true, 
        changeYear: true, 
        yearRange: '2012:2020',
        minDate: new Date(),
        onSelect: function(date){

            var selectedDate = new Date(date);
            var msecsInADay = 86400000;
            var endDate = new Date(selectedDate.getTime() + msecsInADay);

            $("#dob2").datepicker( "option", "minDate", endDate );
            $("#dob2").datepicker( "option", "maxDate", '+2d' );
        }
    });
    });
   $(function() {
        $('#dob2').datepicker({changeMonth: true, changeYear: true, 
    yearRange: '2012:2020'});
   });
</script>

Пожалуйста, помогите мне, если я ошибаюсь, мой код работает, если я выбираю сегодняшнюю дату, но когда я выбираю расширеннуюдни, это отключает поле «Дата окончания».

Ответы [ 2 ]

0 голосов
/ 21 сентября 2019 

$(function() {
        $('#dob').datepicker({
        changeMonth: true, 
        changeYear: true, 
        yearRange: '2012:2020',
        minDate: new Date(),
        onSelect: function(date){
            var selectedDate = new Date(date);
            $("#dob2").datepicker( "option", "minDate", new Date(selectedDate.getTime() + 86400000) );
            $("#dob2").datepicker( "option", "maxDate",  new Date(selectedDate.getTime() + (3*24*60*60*1000)) ); //where 3 is for 3 days.you can change it according to your need  
        }
    });
        $('#dob2').datepicker({changeMonth: true, changeYear: true, yearRange: '2012:2020'});

    });    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<div class="row-form clearfix">
<div class="span5">Free Trail Date:</div>
<div class="span7">
<input  value=""  placeholder="From" style="width: 96px;" type="text" name="ftdt" id="dob" required/>
<input  value=""  placeholder="To" style="width: 96px;" type="text" name="ft_snd" id="dob2" required/>
</div>
</div>
0 голосов
/ 21 сентября 2019

Я решил свой вопрос, добавив небольшое изменение: 

<script>
    $(function() {
        $('#dob').datepicker({
        changeMonth: true, 
        changeYear: true, 
        yearRange: '2012:2020',
        minDate: new Date(),
        maxDate: '+2y',
        onSelect: function(date){
            var selectedDate = new Date(date);
            var msecsInADay = 86400000;
            var endDate = new Date(selectedDate.getTime() + msecsInADay);
            var lastDate = new Date(selectedDate.getTime() + 2 * msecsInADay);
            $("#dob2").datepicker( "option", "minDate", endDate );
            $("#dob2").datepicker( "option", "maxDate", lastDate );
        }
    });
    });
</script>
...