Question

我有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'
    });

}

但是，返回日期的输出不应用出发日期的限制。

如何使用从返回日期中选择的值来限制返回开始日期？

Answer 1

它以两种方式工作。在你问和扭转的方式。享受

  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=""/>

Answer 2

如果我是对的，您正在使用bootstrap-datepicker

上面的链接为您提供在日期选择器上可访问的方法，上面的链接为您显示绑定到datepciker时发生的“ changeDate”事件，然后可以将其与函数结合使用（我已经在jQuery考虑您正在使用引导程序）来更新日期。

我已经将该方法稍微扩展到了第一个输入的结束日期设置的很好。希望对您有帮助

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

详细说明

如果获得所有输入，则使用JQuery选择器（$（“ input [type ='text']”））。这样会在页面上创建一个元素数组。
设置日期选择器的默认初始化值。
绑定'.on（'changeDate'）方法，以便随时输入其日期更改，然后将其运行。
使用'$（this）.closest（'form'）。find（'input：text'）'，我可以稍后将输入用作扇区。
（选定的）函数将输入的值传递给方法，然后使用访问器的'selected.date.valueOf（）'返回该日期的值。
最后使用“ setStartDate”在数组中元素索引上设置日期。

Bootstrap DatePicker动态限制开始日期

2 个答案: