用 jquery 链接两个日期选择器答案

【问题标题】：link two datepickers with jquery用 jquery 链接两个日期选择器
【发布时间】：2017-05-16 07:12:18
【问题描述】：

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

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>

那么我应该改变什么

【问题讨论】：

你用的是什么日期选择器？
这是一个基于引导的日期选择器
您必须删除第二个日期选择器中的onSelect 事件，因为您不想根据第二个日期选择器上的选定值更新第一个事件。其余代码都很好，请检查此小提琴:jsfiddle.net/amani1988/ww18L033

标签： javascript jquery validation date

【解决方案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。

【讨论】：

我是 jQuery 的初学者，你能告诉我如何集成这段代码
我希望如果例如 #date_added 是 16/05/2017 那么#date_modified 将是 16/05/2017 或之后，如果我为 #date_modified 选择 16/05/2017 那么#date_added 将在 2017 年 5 月 16 日或之前
@WassimMakni ，我为您创建了交互式 sn-p。尝试运行一个。日期格式为月/日/年。

【解决方案2】：

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


    $('#date_added').datepicker({

        onSelect: function(dateStr) {

//Modification done here ;; 
           var dt = new Date(dateStr);
            dt.setDate(dt.getDate() + 1);
            $("#date_modified").datepicker("option", "minDate", dt);

        },
        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");
        //Modification done here ;;
            var dt = new Date(dateStr);
            dt.setDate(dt.getDate() - 1);
            $("#date_added").datepicker("option", "maxDate", dt);

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

});


</script>

【讨论】：

我的问题是我无法访问 onSelect 函数，即使我在 onSelect 函数中添加了一个日志，它也不起作用
@wassim-makni 你能指定你得到的错误吗？
谷歌浏览器上的检查元素没有给我错误
如果您可以突出显示您尝试放置日志的位置。
$('#date_added').datepicker({ onSelect: function(dateStr) { console.log("jjj");///this doesn't work start_date=$(this).val(); $('#date_modified').datepicker('option', 'minDate', new Date(start_date)); },

【解决方案3】：

这里是解决方案 - 检查下面的 sn-p

jquery 代码：-

$(function () {
            $("#txtFrom").datepicker({
                numberOfMonths: 1,
                dateFormat: "dd-M-yy",
                onSelect: function (selected) {
                    var dt = new Date(selected);
                    dt.setDate(dt.getDate() + 1);
                    $("#txtTo").datepicker("option", "minDate", dt);
                }
            });
            $("#txtTo").datepicker({
                numberOfMonths: 1,
                dateFormat: "dd-M-yy",
                onSelect: function (selected) {
                    var dt = new Date(selected);
                    dt.setDate(dt.getDate() - 1);
                    $("#txtFrom").datepicker("option", "maxDate", dt);
                }
            });
        });

$(function () {
            $("#txtFrom").datepicker({
                numberOfMonths: 1,
                dateFormat: "dd-M-yy",
                onSelect: function (selected) {
                    var dt = new Date(selected);
                    dt.setDate(dt.getDate() + 1);
                    $("#txtTo").datepicker("option", "minDate", dt);
                }
            });
            $("#txtTo").datepicker({
                numberOfMonths: 1,
                dateFormat: "dd-M-yy",
                onSelect: function (selected) {
                    var dt = new Date(selected);
                    dt.setDate(dt.getDate() - 1);
                    $("#txtFrom").datepicker("option", "maxDate", dt);
                }
            });
        });

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                From:
            </td>
            <td>
                <input type="text" id="txtFrom" />
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                To:
            </td>
            <td>
                <input type="text" id="txtTo" />
            </td>
        </tr>
    </table>

【讨论】：