Datepicker Jquery在选择第一个日期后设置第二个日期答案

【问题标题】：Datepicker Jquery Set Second Date After Choosing First DateDatepicker Jquery在选择第一个日期后设置第二个日期
【发布时间】：2017-09-10 07:12:43
【问题描述】：

我正在构建一个住宿租赁搜索表。该网站是基于 ASPX 的，我正在使用带有 CSS 的 JS Jquery Datepicker 设置来使其工作。

我能够使日期弹出窗口正常工作和定位。但是，当网站用户选择第一个日期时，我需要第二个日期弹出窗口打开 +2 天。或者将第二个日期设置为 +2 天。

有谁知道如何将 JS 代码添加到我当前的设置中以使其正常工作？任何帮助都将不胜感激，因为我查看了有关该主题的几篇帖子并且无法使其正常工作。

下面是我目前使用的 JS：-

<script>
$(document).ready(function() {

$("#txtDate").datepicker({
    showOn: 'button',
    buttonText: 'Show Date',
    numberOfMonths:1,
    buttonImageOnly: true,
    buttonImage: '/images/cont/mobile/calendar.png'
});

$("#txtDate2").datepicker({
    showOn: 'button',
    buttonText: 'Show Date',
    numberOfMonths:1,
    buttonImageOnly: true,
    buttonImage: '/images/cont/mobile/calendar.png'
});

$(".ui-datepicker-trigger").mouseover(function() {
    $(this).css('cursor', 'pointer');
});

});
</script>

这是 HTML：-

<input type='text' id='txtDate' name="checkin" value=" " /> 

<input type="text" id="txtDate2" name="checkout" value=" " />

【问题讨论】：

标签： javascript jquery date datepicker

【解决方案1】：

您可以根据第一个日期选择器的onSelect 事件获取所选日期并为其添加 2 天。

$(function () {
  $("#txtDate").datepicker({
    //showOn: 'button',
    buttonText: 'Show Date',
    numberOfMonths: 1,
    buttonImageOnly: true,
    buttonImage: '/images/cont/mobile/calendar.png',
    onSelect: function(dateText, inst) {
      var txtDate = $(this).datepicker('getDate');
      txtDate.setDate(txtDate.getDate() + 2);
      $("#txtDate2").datepicker('setDate', txtDate);
    }
  });

  $("#txtDate2").datepicker({
    //showOn: 'button',
    buttonText: 'Show Date',
    numberOfMonths: 1,
    buttonImageOnly: true,
    buttonImage: '/images/cont/mobile/calendar.png'
  });

  $(".ui-datepicker-trigger").mouseover(function () {
    $(this).css('cursor', 'pointer');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type='text' id='txtDate' name="checkin" value=" " />
<input type="text" id="txtDate2" name="checkout" value=" " />

【讨论】：

该解决方案运行良好，第二个日期字段现在更新为日期 +2。有谁知道如何获取它，以便当用户将光标放在日期字段中时打开日期弹出窗口？现在日期弹出窗口仅在单击日历图形时打开弹出窗口。我猜它与 Jquery onClick 设置有关。也许我应该使用类似 onClick: datepicker(); ?
我想我明白了。我添加了这段代码，它似乎工作。 $("#txtDate").click(function() { $(this).datepicker().datepicker("show") }); $("#txtDate2").click(function() { $(this).datepicker().datepicker("show") });
更新了上面的代码。只需为两个日期选择器禁用 showOn。