Question

第一次约会选择器

    <div class="input-group date " data-provide="datepicker">
      <input type="text" name="date1" class="form-control datepicker1" placeholder="Select pick up date">
    </div>

第二个日期选择器

    <div class="input-group date" data-provide="datepicker">
      <input type="text" name="date2" class="form-control  datepicker2" placeholder="Select delivery  date">
    </div>

有两个日期选择器。第二个日期选择器的值基于第一个。如果用户在第一个日期选择器上选择了今天的日期，那么日期选择器2将只允许选择从明天开始的日期。

      $(document).ready(function(){
        $('.datepicker1').datepicker( { 

            format: 'dd-mm-yyyy',
            startDate:'+0d',
            autoclose: true,

           onSelect: function(date){           
           var date1 = $('.datepicker1').datepicker('getDate');        
        var date = new Date( Date.parse( date1 ) ); 
        date.setDate( date.getDate() + 1 );        
        var newDate = date.toDateString(); 
        newDate = new Date( Date.parse( newDate ) );                      
        $('.datepicker2').datepicker("option","minDate",newDate);            
    }
        });

        $('.datepicker2').datepicker( {    
            format: 'dd-mm-yyyy',
            autoclose: true, 
            minDate:0,
        });

    });

如果用户在第一个日期选择器中选择10-04-2019，则用户只能在第二个日期选择器中从11-04-2019中选择。

这是要求

Answer 1

只需为第二个日期选择器输入设置minDate选项，这样用户就不能选择该日期或向后设置日期。

在下面检查我更新的代码段：

$(document).ready(function(){
    // Init first datepicker
    $('.datepicker1').datepicker( { 
      format: 'dd-mm-yyyy',
      startDate:'+0d',
      autoclose: true,
      onSelect: function(date){
        // Select next day
        var nextDay = new Date(date);
        nextDay.setDate(nextDay.getDate() + 1);
        $(".datepicker2").datepicker("option","minDate", nextDay);
      }
    });
  
    // Init second datepicker
    $('.datepicker2').datepicker( {    
        format: 'dd-mm-yyyy',
        startDate:'+0d',
        autoclose: true,
        onSelect: function(date){           
          //validate date here   
        }
    });
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicke</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
first date picker

<div class="input-group date " data-provide="datepicker">
  <input type="text" name="date1" class="form-control datepicker1" placeholder="Select pick up date">
</div>



second datepicker

<div class="input-group date" data-provide="datepicker">
  <input type="text" name="date2" class="form-control  datepicker2" placeholder="Select delivery  date">
</div>
 
 
</body>
</html>

jQuery datepicker：基于第一个日期选择器选择第二个日期选择器的值

1 个答案: