jQuery datepicker：基於第一個日期選擇器選擇第二個日期選擇器的值

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 個解決方案

解決方案1
3 2019-04-03 05:34:26

jQuery datepicker：基於第一個日期選擇器選擇第二個日期選擇器的值

問題描述

1 個解決方案

解決方案1 3 2019-04-03 05:34:26

解決方案1
3 2019-04-03 05:34:26