多个日期选择器禁用上一个日期不起作用

时间:2017-02-26 14:04:26

标签: jquery jquery-ui

看起来这段代码已经承诺不在我的代码中工作。我想做的是我有两个约会选择器。当我点击Date1时,我想要禁用该月的所有上一个日期。在选择date2时,我想禁用date1的所有上一个日期。我无法理解我在这里缺少什么。有什么帮助吗?

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</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>
<script>
 $( function() {
  $( "#datepicker" ).datepicker();
  $( "#enddate" ).datepicker();
 });
</script>
<script type="text/javascript">
$(document).ready(function() {    
  $("#datepicker").datepicker({
    minDate: 0,
    onSelect: function(date) {
      $("#enddate").datepicker('option', 'minDate', date);
    }
  });
$("#enddate").datepicker({});
</script>
</head>
<body> 
 <p>Date1: <input type="text" id="datepicker"></p>
 <p>Date2: <input type="text" id="enddate"></p>
 </body>
 </html>

1 个答案:

答案 0 :(得分:1)

试试这个:

$(document).ready(function() {    
  $("#datepicker").datepicker({
    minDate: 0
  });
  $("#enddate").datepicker();
  $("#datepicker").datepicker("option", "onSelect", function(date) {
    $("#enddate").datepicker('option', 'minDate', date);
  });
});

或者:

$(document).ready(function() {    
  $("#datepicker").datepicker({
    minDate: 0
  });
  $("#enddate").datepicker({
    minDate: $("#datepicker").datepicker("getDate");
  });
});

后者我怀疑会更好。