JQuery UI Datepicker：选择出发日期时自动弹出返回日期

Question

我有两个输入字段，用户可以在其中指定出发和返回日期。

我正在尝试实现一种情况，当用户选择出发日期时，日期选择器会在返回日期自动弹出。

以下是我目前所拥有的，但不起作用。

HTML：

<input id="departure-date" type="text">
<input id="return-date" type="text">

（JQuery）Javascript：

$(function() {
   $('#departure-date').datepicker({
      numberOfMonths: 2,
      showAnim: "fold",
      showButtonPanel: true,
      onSelect: (function(){ 
        this.val(date.toLocaleDateString());
        $('#return-date').focus();  
      })
   });

   $('#return-date').datepicker({
      numberOfMonths: 2,
      showAnim: "fold",
      showButtonPanel: true,
      onSelect: (function(){ 
        this.val(date.toLocaleDateString());    
      })
   });
});

任何关于如何让它发挥作用的想法将不胜感激。

Answer 1

你可以尝试类似的事情

$(function() {
  $('#departure-date').datepicker({
    numberOfMonths: 2,
    showAnim: "fold",
    showButtonPanel: true,
    onSelect: (function(date) {
      setTimeout(function() {
        $('#return-date').datepicker('show');
      }, 300)
      $(this).val($(this).datepicker('getDate').toLocaleDateString());
    })
  });

  $('#return-date').datepicker({
    numberOfMonths: 2,
    showAnim: "fold",
    showButtonPanel: true,
    onSelect: (function(date) {
      $(this).val($(this).datepicker('getDate').toLocaleDateString());
    })
  });
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<input id="departure-date" type="text">
<input id="return-date" type="text">

演示：小提琴

Answer 2

当值发生变化时，您不需要设置日期选择器的值。

$(function() {
   $('#departure-date').datepicker({
      numberOfMonths: 2,
      showAnim: "fold",
      showButtonPanel: true,
      onSelect: (function(){ 
        $('#return-date').focus();  
      })
   });

   $('#return-date').datepicker({
      numberOfMonths: 2,
      showAnim: "fold",
      showButtonPanel: true,
      onSelect: (function(){ 

      })
   });
});

Answer 3

$(function() {
  $('#departure-date').datepicker({
    numberOfMonths: 2,
    showAnim: "fold",
    showButtonPanel: true,
    onSelect: (function(date) {
      setTimeout(function() {
        $('#return-date').datepicker('show');
      }, 300)
      $(this).val($(this).datepicker('getDate').toLocaleDateString());
    })
  });

  $('#return-date').datepicker({
    numberOfMonths: 2,
    showAnim: "fold",
    showButtonPanel: true,
    onSelect: (function(date) {
      $(this).val($(this).datepicker('getDate').toLocaleDateString());
    })
  });
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<input id="departure-date" type="text">
<input id="return-date" type="text">