范围datepicker设置minDate

时间:2013-08-21 03:58:51

标签: jquery-ui

尝试在此代码中设置4天+的fromdate选定值并且无法使其工作。我想要的是当一个人选择第一个日历日期时,我希望第二个minDate比所选第一个日期的值超过4天。

<?php
// has all script and css includes
include('includes/header.php');
?>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div class="container">
<div class="row">
<div class="span3"></div>
<div class="span9">
<input class='fromdate' id='fromdate' />
<input class='todate' id='todate' />
<input class='calculated' />
<!-- <input class='minim' /> -->
</div>
</div>
</div>
<script>
$('.fromdate').datepicker({
    dateFormat: 'mm-dd-yy',
    minDate:(+4)

});
$('.todate').datepicker({
    dateFormat: 'mm-dd-yy'
});
$('.fromdate').datepicker().bind("change", function () {
    var minValue = $(this).val();
    minValue = $.datepicker.parseDate("mm-dd-yy", minValue);
    $('.todate').datepicker("option", "minDate", minValue);
    calculate();
});
$('.todate').datepicker().bind("change", function () {
    var maxValue = $(this).val();
    maxValue = $.datepicker.parseDate("mm-dd-yy", maxValue);
    $('.fromdate').datepicker("option", "maxDate", maxValue);
    calculate();
});

function calculate() {
    var d1 = $('.fromdate').datepicker('getDate');
    var d2 = $('.todate').datepicker('getDate');
    var diff = 1;
    if (d1 && d2) {
        diff = diff + Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
    }
    $('.calculated').val(diff);
    $('.minim').val(d1)
}
</script>

1 个答案:

答案 0 :(得分:3)

我找到了answer,就像下面一样,

$(document).ready(function () {
   $("#fromdate").datepicker({
        dateFormat: "mm-dd-yy",
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#fromdate').datepicker('getDate');
            date2.setDate(date2.getDate() + 4);
            $('#todate').datepicker('setDate', date2);
            //sets minDate to dt1 date + 4
            $('#todate').datepicker('option', 'minDate', date2);
        }
    });
    $('#todate').datepicker({
        dateFormat: "mm-dd-yy",
        onClose: function () {
            var dt1 = $('#fromdate').datepicker('getDate');
            var dt2 = $('#todate').datepicker('getDate');
            //check to prevent a user from entering a date below date of dt1
            if (dt2 <= dt1) {
                var minDate = $('#todate').datepicker('option', 'minDate');
                $('#todate').datepicker('setDate', minDate);
            }
        }
    });
});

demo