Question

我正在设置一个网站，其中包含“签到”日期和“签出”日期日期选择器。我需要“结账”日期自动设置为入住日期后的第二天。

我找到了一段代码here，但由于某些原因它似乎无法正常工作。

我设置了CodePen here。

以下是我正在使用的代码：

$(function () {
$("#datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function (selectedDate) {
if (this.id == 'datepicker') {
var dateMin = $('#datepicker').datepicker("getDate");
var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1);
var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 15);
$('#datepicker2').val($.datepicker.formatDate('mm/dd/yy', new Date(rMax)));
}
}
});
});

Answer 1

在你的代码笔中，删除它：

jQuery(function() {
jQuery( "#datepicker" ).datepicker();
jQuery( "#datepicker2" ).datepicker();
});

然后再试一次。
但是如果你想要第二天，也许你最后想的是rMin而不是rMax。

Answer 2

<强> DEMO HERE

这是工作演示，结帐日期是自动选择日期后的一天..

 $("#CheckInDatePicker").datepicker({     
            defaultDate: "+0",               
            changeMonth: true,
            dateFormat: "mm-dd-yy",
            minDate: "+0",
            onSelect: function (dateText, inst) {
                var d = $.datepicker.parseDate(inst.settings.dateFormat, dateText);
             d.setDate(d.getDate() + 1);
                $("#CheckOutDatePicker").val($.datepicker.formatDate(inst.settings.dateFormat, d));

           },

            onClose: function (selectedDate) {
                $("#CheckOutDatePicker").datepicker("option", "minDate", selectedDate);

            }

        });

Answer 3

使用JQuery的默认datepicker插件很简单。 jsfiddle中的代码包含2个用于签入的文本框，另一个用于签出。

<a data-toggle="popover" title="توضیحات کاربر ارشد" data-content="Description" 
   data-trigger="hover">
popover
</a>

Hit Me !! For code...

Answer 4

我所做的就是把＃34; datepicker2＆＃34;在您提供的解决方案下再次运行。然后当我点击＆＃34; Check-Out＆＃34;在明亮的蓝色中选中结帐日期默认后的第二天，它会工作并再次显示日历。谢谢你。我也在苦苦挣扎。

[<script>
  $(function () {
$("#datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function (selectedDate) {
if (this.id == 'datepicker') {
var dateMin = $('#datepicker').datepicker("getDate");
var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1);
var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1);
$('#datepicker2').val($.datepicker.formatDate('mm/dd/yy', new Date(rMax)));
}
}
});
});
</script>][1]


<script>
  $( function() {
    $( "#datepicker2" ).datepicker({
            dateFormat: "mm/dd/yy"}

    );

  } );
  </script>

HTML：

<div class="column1">
    <span>CHECK-IN</span>
    <br />
    <input name="DateIn" type="text" id="datepicker"/>
  </div>


   <div class="column2">
   <span>CHECK-OUT</span>
 <br />
    <input name="DateOut" type="text" id="datepicker2"/>
  </div>

enter image description here

jQuery Datepicker，退房日期是入住日期后的一天

4 个答案: