2015-04-01 137 views
1
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Datepicker - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 

    <script> 
     $(function() { 
      $("#datepicker1").datepicker(); 
     }); 
    </script> 

    <script> 
     $(function() { 
      $("#datepicker2").datepicker(); 
     }); 
    </script> 
</head> 
<body> 
    <p>Date 1: <input type="text" id="datepicker1"></p> 
    <p>Date 2: <input type="text" id="datepicker2"></p> 
</body> 
</html> 

在我的代碼中有兩個日期選擇器。我想要的是當我從第一個日期選擇器中選擇日期時禁用日期。這是假設如果我從第一個日期選擇器中選擇日期,如15/01/2015。現在在第二個日期選擇器中,15/01/2015之後的所有日期都將被禁用。但15/01/2015之前的日期將在第二個日期選擇器中啓用。jQuery日期選擇器 - 從第一個日期選擇器中選擇後禁用日期

我怎麼能這樣做?

回答

1

可以使用的maxDate選項

$(function() { 
    $("#datepicker1").datepicker().change(function() { 
     $("#datepicker2").datepicker('option', 'maxDate', $(this).datepicker('getDate')); 
    }); 
    $("#datepicker2").datepicker(); 
}); 

演示:Fiddle

+1

另請參閱http://jsfiddle.net/arunpjohny/09L69cfz/1/ – 2015-04-01 04:21:13

0

onSelect事件觸發時,您選擇的DatePicker日期。

請嘗試下面的代碼。

$(function() { 
    $("#datepicker1").datepicker({ 
     onSelect: function (date) { 
      $("#datepicker2").datepicker({ 
       'maxDate': date 
       //'minDate' : date 
      }); 
     } 
    }); 
}); 

你可以操縱使用maxDateminDate性質的日期。