Question

我有2个日期（Dep＆amp; Return）输入和内联日期选择器日历，当点击每个输入时显示在bootstrap模式中

<input type="text" id="DepDate" name="DepDate" class="form-control" data-toggle="modal" data-target="#myModal" readonly />
<input type="text" id="returnDate" name="returnDate" class="form-control" data-toggle="modal" data-target="#myModal" readonly  />
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-body">
                <div id="datepicker"></div> // Inline Calendar
            </div>
        </div>
    </div>
</div>

和脚本

$(document).ready(function () {     
    $('#DepDate, #returnDate').datepicker({ //Both inputs have dates but calendar turns `off`
        dateFormat: 'd-M-yy',
        showOn: "off"
    }).datepicker("setDate", new Date());

    $('#myModal').on('show.bs.modal', function (e) { //Bootstrap Modal event to fetch the respective input id
        var Dateid = $(e.relatedTarget).attr('id');
        $('#datepicker').datepicker({
            dateFormat: 'd-M-yy',
            minDate: 0,
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'],
            onSelect: function (selectedDate) { //ON Select Function
                var dateMin = $('#datepicker').datepicker("getDate");
                if (Dateid === 'DepDate') { //If Depart Date
                    var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1);
                    var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 7);
                    $('input[name="DepDate"]').val($(this).datepicker({
                        dateFormat: 'd-M-yy'
                    }).val());
                    $('input[name="returnDate"]').val($.datepicker.formatDate('d-M-yy', new Date(rMax)));
                } else if (Dateid === 'returnDate') { //If Return Date
                    $('input[name="returnDate"]').val($(this).datepicker({
                        dateFormat: 'd-M-yy'
                    }).val());
                }
                $("#myModal").modal("hide"); //Hide Modal After Date Selection
            }
        });
    });
});

目标是：

两个输入都从模态中获取内联日历的日期。
Dep＆amp;选择DepDate时，返回日期必须有7天的差异。
如果选择DepDate大于当前日期，则必须禁用所选DepDate之前的日期。

实现了前2个目标，但问题是;

点击ReturnDate输入并从内联日历中选择日期后，它会替换选定的DepDate，然后添加7天的差异，并将选定的ReturnDate显示为DepDate并插入新的日期输入中的日期为ReturnDate。

我缺少什么，我该如何解决这个问题？

Fiddle

jQuery datepicker，onSelect第二个输入日期选择更改第一个输入日期

0 个答案: