具有开始和结束日期条件的 JQuery 链接日期选择器答案

【问题标题】：JQuery linked datepickers with condition of start and end dates具有开始和结束日期条件的 JQuery 链接日期选择器
【发布时间】：2017-05-15 12:13:31
【问题描述】：

我有两个日期选择器，其中一个用于开始日期，另一个用于结束日期。我的问题是，如果我选择开始日期输入，结束日期输入应该在这个日期之后，所以我应该锁定其他日期，如果我选择结束日期输入，开始日期输入应该在结束日期之后 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() {    
        $('#date_added').datepicker({
            todayBtn : "linked",
            keyboardNavigation : false,
            forceParse : false,
            calendarWeeks : true,
            autoclose : true
        });    
        $('#date_modified').datepicker({
            todayBtn : "linked",
            keyboardNavigation : false,
            forceParse : false,
            calendarWeeks : true,
            autoclose : true
        });    
    });
</script>

那么我应该添加什么

【问题讨论】：

标签： javascript jquery date datepicker

【解决方案1】：

看看这个例子

<div class='input-group date' id='time_from' style="width:500px">
<input type='text' class="form-control" />
<span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='time_to' style="width:500px">
<input type='text' class="form-control" />
<span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
</span>
</div>


$('#time_from').datetimepicker({
viewMode: 'days',
minDate: new Date(), //Current
format: 'DD. MMMM YYYY - HH:mm',
});

$('#time_to').datetimepicker({
viewMode: 'days',
maxDate: new Date().setDate(new Date().getDate() + 90),
useCurrent: false,
format: 'DD. MMMM YYYY - HH:mm'
});

$('#time_from').on('dp.change', function (e) {
$('#time_to').data('DateTimePicker').minDate(e.date);

//Use moment.js here
var m = moment(new Date(e.date));
m.add(90, 'days');
$('#time_to').data('DateTimePicker').maxDate(m);
});

看看这个fiddle

【讨论】：

【解决方案2】：

<script>
$(document).ready(function() {
    var start_date=$('#date_added').val();
    var end_date=$('#date_modified').val();
    $('#date_added').datepicker({
        onSelect: function(dateText, inst) {
            start_date=$(this).val();
            $('#date_modified').datepicker('option', 'minDate', new Date(start_date));

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

    $('#date_modified').datepicker({
        onSelect: function(dateText, inst) {
            end_date=$(this).val();
            $('#date_added').datepicker('option', 'minDate', new Date(end_date));

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

});

【讨论】：