Bootstrap DatePicker Limit запускается динамически - PullRequest
Новая
       18

Bootstrap DatePicker Limit запускается динамически

0 голосов
/ 04 июля 2019

У меня есть 2 средства выбора даты, которые используются для выбора даты начала и даты возвращения.

Я хотел бы ограничить дату возвращения, используя значение даты начала, например, если я выберу 15/7/2019, тогда дата возвращения должна начинаться с 16/7/2019. Это должно быть динамичным.

Я попробовал следующую реализацию: 

var returndate = new Date();
returndate.setDate(returndate.getDate() + 1);
$('.travel-depature-dates').datepicker({
    autoclose: true,
    todayHighlight: true,
    startDate: returndate,
    beforeShowYear: function (date) {

    },
    toggleActive: true,
    format: 'dd/mm/yyyy',
}).on('changeDate', function (e) {
    return_datepicker();
});

function return_datepicker() {
    var departure_date = $(".departure_date").val();

    var minimum_date = new Date();
    minimum_date.setFullYear(minimum_date.getFullYear() - 1);

    console.log("Departure date => " + departure_date);


    $('.travel-return-dates').datepicker({
        autoclose: true,
        todayHighlight: true,
        startDate: departure_date,
        toggleActive: true,
        format: 'dd/mm/yyyy'
    });

}

Тем не менее, выходные данные для даты возвращения не применяют ограничение даты отъезда.

Как я могу ограничить возврат, дату начала, используя значение, выбранное из даты возврата?

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

Если я прав, вы используете bootstrap-datepicker

Эта ссылка выше дает вам методы, которые доступны для выбора даты, ссылка выше показывает событие 'changeDate', котороепроисходит, когда вы привязываетесь к datepciker, и затем вы можете использовать это в сочетании с функцией (я сделал это в JQuery, учитывая, что вы используете bootstrap), чтобы затем обновить дату.

Я немного расширил метод до концаДата первого ввода задается хорошо.надеюсь, это поможет

HTML 

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control date" placeholder="Departure Date">
    </div>
    <div class="col">
      <input type="text" class="form-control date" placeholder="Return Date">
    </div>
  </div>
</form>

JS 

$("input[type='text']").datepicker({
        autoclose: true,
    todayHighlight: true,
    toggleActive: true,
    format: 'dd/mm/yyyy',
}).on('changeDate', function(selected){
  updateDate($(this).closest('form').find('input:text'), selected);
});

function updateDate(inputs, selected){
   var minDate = new Date(selected.date.valueOf());
   $(inputs[1]).datepicker('setStartDate', minDate);
   $(inputs[0]).datepicker('setEndDate', minDate);
}

JSFIDDLE

Подробное объяснение

  1. Использование селектора JQuery, если получить все входные данные ($ ("input [type = 'text']")).Это создаст массив элементов на странице.
  2. Установите значения инициализации по умолчанию для DatePickers.
  3. Создайте цепочку для метода .on (changeDate), чтобы в любое время вводить дату и изменять ее.это запустится.
  4. Используя '$ (this) .closest (' form '). find (' input: text ')', я получу входы для использования в качестве секторов позже.
  5. функция (selected) передает значение, введенное в метод, затем я использую accessorss selected.date.valueOf (), чтобы вернуть значение этой даты.
  6. Наконец, установите дату, используя setStartDate для индекса элемента измой массив.
0 голосов
/ 04 июля 2019

Работает двумя способами.Так, как вы просили, и наоборот.Наслаждайтесь 

  var monthNames = [
      "January", "February", "March", "April", "May", "June", "July",
      "August", "September", "October", "November", "December"
    ];
    var dayOfWeekNames = [
      "Sunday", "Monday", "Tuesday",
      "Wednesday", "Thursday", "Friday", "Saturday"
    ];

    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);

     $('.d1').datepicker({format: "dd/mm/yyyy", autoclose: true}).val(formatDate(new Date()));

     $('.d2').datepicker({format: "dd/mm/yyyy", autoclose: true}).val(formatDate(tomorrow));

 
function d1_ch (){
    
     var d1_val = convert('/',$('.d1').val()),
         d2_val = convert('/',$('.d2').val()); 
        
         if (d1_val >= d2_val) {
             
             d2_val.setDate(d1_val.getDate() + 1);
             $('.d2').datepicker().val(formatDate(d2_val));
         }
}

function d2_ch (){
    
     var d1_val = convert('/',$('.d1').val()),
         d2_val = convert('/',$('.d2').val());
         
         if (d2_val <= d1_val) {
              
           d1_val.setDate(d2_val.getDate() - 1);
           $('.d1').datepicker().val(formatDate(d1_val));
         }
}
function convert(delimiter,dateString) {
    
        var splitted = dateString.split('/'); 
        var myDate = new Date(splitted[2],splitted[1]-1,splitted[0]);   
        return myDate;
      }
      
function formatDate(date, patternStr){
    if (!patternStr) {
        patternStr = 'dd/MM/yyyy';
    }
    var day = date.getDate(),
        month = date.getMonth(),
        year = date.getFullYear(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        second = date.getSeconds(),
        miliseconds = date.getMilliseconds(),
        h = hour % 12,
        hh = twoDigitPad(h),
        HH = twoDigitPad(hour),
        mm = twoDigitPad(minute),
        ss = twoDigitPad(second),
        aaa = hour < 12 ? 'AM' : 'PM',
        EEEE = dayOfWeekNames[date.getDay()],
        EEE = EEEE.substr(0, 3),
        dd = twoDigitPad(day),
        M = month + 1,
        MM = twoDigitPad(M),
        MMMM = monthNames[month],
        MMM = MMMM.substr(0, 3),
        yyyy = year + "",
        yy = yyyy.substr(2, 2)
    ;
    // checks to see if month name will be used
    if (patternStr.indexOf('MMM') > -1) {
        patternStr = patternStr
          .replace('MMMM', MMMM)
          .replace('MMM', MMM);
    }
    else {
        patternStr = patternStr
          .replace('MM', MM)
          .replace('M', M);
    }
    return patternStr
      .replace('hh', hh).replace('h', h)
      .replace('HH', HH).replace('H', hour)
      .replace('mm', mm).replace('m', minute)
      .replace('ss', ss).replace('s', second)
      .replace('S', miliseconds)
      .replace('dd', dd).replace('d', day)
      
      .replace('EEEE', EEEE).replace('EEE', EEE)
      .replace('yyyy', yyyy)
      .replace('yy', yy)
      .replace('aaa', aaa)
    ;
}
function twoDigitPad(num) {
    return num < 10 ? "0" + num : num;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <input class="d1 datepicker" onchange="d1_ch();" value=""/>
    <input class="d2 datepicker" onchange="d2_ch();" value=""/>
...