2016-03-05 3 views
0

У меня есть ситуация, когда Пользователь может выбирать только диапазон дат 7 дней.Eonasdan Bootstrap Linked DateTime Pickers не работает должным образом

Так что, если дата начала 01-02-2016 00:00 Максимальная дата окончания должна быть 06-02-2016 23:59

Затем, если пользователь выбирает 08-02-2016 00:00 с Максимальная дата окончания должна быть 14-02-2016 23:59

Так для этого я использую Дата Время Picker: http://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

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

enter image description here

Вот код, у меня есть:

$(function() { 

    $('#HistoryStartDate').datetimepicker({ 
    format: 'DD/MM/YYYY HH:mm', 
    allowInputToggle: true, 
    useCurrent: true 
    }).on('dp.change', function(e) { 
    $('#HistoryEndDate').data('DateTimePicker').minDate(e.date); 
    var m = moment(new Date(e.date)); 
    m.add(6, 'days'); 
    $('#HistoryEndDate').data('DateTimePicker').maxDate(m); 
    }); 

    $('#HistoryEndDate').datetimepicker({ 
    format: 'DD/MM/YYYY HH:mm', 
    allowInputToggle: true, 
    useCurrent: true 
    }); 


}); 

Вот JSFiddle: https://jsfiddle.net/xsmsym3m/

EDIT:

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

$(function() { 

    $('#HistoryStartDate').datetimepicker({ 
    format: 'DD/MM/YYYY HH:mm', 
    allowInputToggle: true, 
    useCurrent: true 
    }).on('dp.change', function(e) { 

    // Adding two years so I can set the Min Date 
    var tt = moment(new Date(e.date)); 
    tt.add(2, 'years'); 
    $('#HistoryEndDate').data('DateTimePicker').maxDate(tt); 

     // Set the Min date 
    $('#HistoryEndDate').data('DateTimePicker').minDate(e.date); 

    //Set the Max Date 
    var m = moment(new Date(e.date)); 
    m.add(5, 'days'); 
    m.add(23, 'hours'); 
    m.add(59, 'minutes'); 
    m.add(59, 'seconds'); 
    $('#HistoryEndDate').data('DateTimePicker').maxDate(m); 

     // Set End Date 
    var temp = moment(new Date(e.date)); 
    temp.add(23, 'hours'); 
    temp.add(59, 'minutes'); 
    temp.add(59, 'seconds'); 

    $('#HistoryEndDate').data('DateTimePicker').date(temp); 
    }); 

    $('#HistoryEndDate').datetimepicker({ 
    format: 'DD/MM/YYYY HH:mm', 
    allowInputToggle: true, 
    useCurrent: false 
    }); 


}); 
+0

К сожалению, это мое недоразумение. Но что вы подразумеваете в том, что «не похоже на хорошее решение». Вы хотите минимизировать код? –

+0

@ManhLe Я имею в виду, что это обходное решение - добавление 2-х лет для установки Min date не должно быть решением. –

ответ

1

Вы можете попытаться проверить новое значение minDate перед обновлением второго сборщика.

$(function() { 
 

 
    $('#HistoryStartDate').datetimepicker({ 
 
     format: 'DD/MM/YYYY HH:mm', 
 
     allowInputToggle: true, 
 
     useCurrent: true 
 
    }).on('dp.change', function(e) { 
 
     var minNew = e.date; 
 
     var maxNew = e.date.clone().add(6, 'days'); 
 
     var pickEnd = $('#HistoryEndDate'); 
 
     var minOld = pickEnd.data('DateTimePicker').minDate(); 
 
     var maxOld = pickEnd.data('DateTimePicker').maxDate(); 
 
    
 
     if(minOld && minOld.isAfter(maxNew)){ 
 
      pickEnd.data('DateTimePicker').minDate(minNew); 
 
      pickEnd.data('DateTimePicker').maxDate(maxNew); 
 
     } else { 
 
      pickEnd.data('DateTimePicker').maxDate(maxNew); 
 
      pickEnd.data('DateTimePicker').minDate(minNew); 
 
     } 
 
    }); 
 

 
    $('#HistoryEndDate').datetimepicker({ 
 
     format: 'DD/MM/YYYY HH:mm', 
 
     allowInputToggle: true, 
 
     useCurrent: true 
 
    }); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment-with-locales.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> 
 

 
<div class="form-horizontal"> 
 
    <div class="col-md-4"> 
 
    <div class="form-group"> 
 
     Start Date 
 
     <div class="col-md-9"> 
 
     <div class='input-group date' id="HistoryStartDate"> 
 
      <input type='text' class="form-control" name="HistoryStartDate" value="05/03/2016 00:00" /> 
 
      <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-calendar"></span> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="form-group"> 
 
     End Date 
 
     <div class="col-md-9"> 
 
     <div class='input-group date' id="HistoryEndDate"> 
 
      <input type='text' class="form-control" name="HistoryEndDate" value="05/03/2016 23:59" /> 
 
      <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-calendar"></span> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

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