用jquery链接两个datepickers

时间：2017-05-16 07:12:18

标签： javascript jquery validation date

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

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>

那我应该改变什么

3 个答案:

答案 0 :(得分：4)

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

＆＃13;
＆＃13; 
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);
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

更改显示日期格式，星期几开始以及使用datepicker的其他options。

答案 1 :(得分：0)

<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>

答案 2 :(得分：0)

  

这是解决方案 - 检查下面的代码段

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>

相关问题
最新问题