Отключение 180 дней после текущей даты в Bootstrap datepicker - PullRequest
Новая
       29

Отключение 180 дней после текущей даты в Bootstrap datepicker

0 голосов
/ 24 января 2019

Работа над формой, посредством которой я использую загрузчик даты начальной загрузки для отображения дат пользователю. Есть 2 поля ввода для отображения дат, в основном дата отъезда и дата возвращения .

Когда пользователь выбирает дату отъезда (в средстве выбора даты), я хочу зафиксировать выбранную дату, а в поле даты возвращения отключить 180 дней после выбранной даты отъезда.

~ Пожалуйста, помогите?

Дата отъезда и дата возвращения 

 <!-- Departure date-->
<div class="form-line registar2 love {{ $errors->has('departure_date') ? ' has-error' : '' }}">
    <input type="text" placeholder="Departure Date*" class="form-input dateTextBox" name="departure_date" id="departureDate" value="{{ old('departure_date') }}" required>
</div>
<!--End departure-->

<!-- Return date-->
<div class="form-line registar2 move {{ $errors->has('return_date') ? ' has-error' : '' }}">
         <input type="text" placeholder="Return Date*" class="form-input dateTextBox" name="return_date" id="returnDate" value="{{ old('return_date') }}" required>
</div>
<!-- End return date-->

логика JavaScript для средства выбора даты 

 //Departure date
     $( function() {
      $( "#departureDate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        //yy-mm-dd
        dateFormat: 'yy-mm-dd',
        minDate: '0',
        maxDate: "+20Y",
      });
    });

    //return date
    $( function() {
      $( "#returnDate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        //yy-mm-dd
        dateFormat: 'yy-mm-dd',
        minDate: '0',
        maxDate: "+180D",
      });
    });
    //End dob

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

Вы должны использовать moment.js для вычисления даты в JavaScript.См. Код для установки другого средства выбора даты в соответствии с выбранной датой выбора. 

$("#ret").hide();

$("#dep").datepicker({
    dateFormat: 'dd/mm/yy',
    minDate: 0,
    onSelect: function(dateText) {

        $("#ret").show();
        $("#ret").val('');

        var maxDate = moment(dateText, "DD/MM/YYYY").add(180, 'days').format("DD/MM/YYYY");

        $("#ret").datepicker('option', 'maxDate', maxDate);
        $("#ret").datepicker('option', 'minDate', dateText);

    }
});

$("#ret").datepicker({
    dateFormat: 'dd/mm/yy'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>


<p>Departure Date: <input type="text" id="dep" /></p>
<p>Return Date: <input type="text" id="ret" /></p>
0 голосов
/ 25 января 2019

Попробуйте это ... 

 $( function() {
  $( "#departureDate" ).datepicker({
    changeMonth: true,
    changeYear: true,
    //yy-mm-dd
    dateFormat: 'yy-mm-dd',
    minDate: '0',
    maxDate: "+20Y",
      }).on('changeDate', function (selected) {
        var minDate=new Date(selected.date.getFullYear(),selected.date.getMonth(),selected.date.getDate()+180)

        $('#returnDate').datepicker('setStartDate', minDate);
     });

  });

 $( function() {
      $( "#returnDate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        //yy-mm-dd
        dateFormat: 'yy-mm-dd',
        minDate: '0',
        maxDate: "+180D",
      });
    });
...