Question

我正在建造一个住宿租赁搜索表。该网站是基于ASPX的，我使用CSS的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=" " />

Answer 1

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

onSelect

$(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');
  });
});

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

1 个答案: