javascript - 用 jquery 链接两个日期选择器

Question

我有两个日期选择器，一个用于开始日期，另一个用于结束日期。我的问题是当我选择一个开始日期时，结束日期日期选择器应该在这个日期之后，这样我应该锁定其他日期，如果我选择一个结束日期输入，开始日期输入应该在结束日期之后。

HTML:

<div class="row">
    <div class="col-sm-5">
        <div class="form-group">
            <label class="control-label col-sm-5" for="date_added">Date
                Courrier</label>
            <div class="input-group date">
                <span class="input-group-addon"><i
                    class="fa fa-calendar"></i></span><input id="date_added"
                    type="text" class="form-control" value="03/04/2014">
            </div>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="form-group">
            <label class="control-label col-sm-7" for="date_modified">Date
                Arrivée</label>
            <div class="input-group date">
                <span class="input-group-addon"><i
                    class="fa fa-calendar"></i></span><input id="date_modified"
                    type="text" class="form-control" value="03/06/2014">
            </div>
        </div>
    </div>    
</div>

Javascript:

<script>

$(document).ready(function() {
    var start_date=$('#date_added').val();
    var end_date=$('#date_modified').val();


    $('#date_added').datepicker({

        onSelect: function(dateStr) {

            start_date=$(this).val();
            $('#date_modified').datepicker('option', 'minDate', new Date(start_date));

        },
        todayBtn : "linked",
        keyboardNavigation : false,
        forceParse : false,
        calendarWeeks : true,
        autoclose : true
    });
    console.log("jjj")
    $('#date_modified').datepicker({
        onSelect: function(dateStr) {
            alert("Date is within two weeks");

            end_date=$(this).val();
            $('#date_added').datepicker('option', 'minDate', new Date(end_date));

        },
        todayBtn : "linked",
        keyboardNavigation : false,
        forceParse : false,
        calendarWeeks : true,
        autoclose : true
    });

});


</script>

那我应该怎么改

Answer 1

附加 changeDate 的处理程序#date_added 和 #date_modified 控件的事件。

var fromTimeInput = $('#date_added');
var toTimeInput = $('#date_modified');
var fromTime = fromTimeInput.val();
var toTime = toTimeInput.val();

fromTimeInput.datepicker({
    keyboardNavigation : false,
    forceParse : false,
    calendarWeeks : true,
    autoclose : true,
    endDate: toTime
});
toTimeInput.datepicker({
    keyboardNavigation : false,
    forceParse : false,
    calendarWeeks : true,
    autoclose : true,
    startDate: fromTime
});
fromTimeInput.on("changeDate", function (e) {
    toTimeInput.datepicker('setStartDate', e.date);
});
toTimeInput.on("changeDate", function (e) {
    fromTimeInput.datepicker('setEndDate', e.date);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div class="row">
    <div class="col-sm-5">
        <div class="form-group">
            <label class="control-label col-sm-5" for="date_added">Date
                Courrier</label>
            <div class="input-group date">
                <span class="input-group-addon"><i
                    class="fa fa-calendar"></i></span><input id="date_added"
                    type="text" class="form-control" value="03/04/2014">
            </div>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="form-group">
            <label class="control-label col-sm-7" for="date_modified">Date
                Arrivée</label>
            <div class="input-group date">
                <span class="input-group-addon"><i
                    class="fa fa-calendar"></i></span><input id="date_modified"
                    type="text" class="form-control" value="03/06/2014">
            </div>
        </div>
    </div>    
</div>

要更改显示的日期格式、星期几的开始和其他用途 options日期选择器。