jQuery UI Datepicker日期范围限制3个月

时间:2014-03-04 21:41:24

标签: jquery-ui jquery-ui-datepicker

用户在页面上有2个输入,并且应该能够选择从开始日期到结束日期的3个月内的任何日期范围。 enddate也应该早于startdate,相同的检查阻止startdate晚于enddate。有没有办法在没有外部验证的情况下在datepicker中包含日期范围限制?用户可以选择的日期不限于他们可以走多远。如果他们想要2年前的数据,他们可以从那一年开始提前3个月。在页面加载时,enddate是从今天开始的2天,startdate是今天的日期。

编辑:

        $(function () {
        $("#startDate").datepicker({
            onSelect: function (selectedDate) {
                var orginalDate = new Date(selectedDate);
                var monthsAddedDate = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() + 3));
                alert(monthsAddedDate);
                $("#endDate").datepicker("option", 'minDate', selectedDate);
                $("#endDate").datepicker("option", 'maxDate', monthsAddedDate);
            }
        });

        $("#endDate").datepicker({
            onSelect: function (selectedDate) {
                var orginalDate = new Date(selectedDate);
                var monthsAddedDate = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() - 3));
                alert(monthsAddedDate);
                $("#startDate").datepicker("option", 'minDate', selectedDate);
                $("#startDate").datepicker("option", 'maxDate', monthsAddedDate);
            }
        })
    });

2 个答案:

答案 0 :(得分:3)

解决了它!!!!我不得不切换用变量设置最小和最大日期的位置。我让他们倒退了。现在你不能超过3个月的任何一个日期,但可以在3个月内选择任何日期:D

        $(function () {
        $("#startDate").datepicker({
            onSelect: function (selectedDate) {
                var orginalDate = new Date(selectedDate);
                var monthsAddedDate = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() + 3));
                alert(monthsAddedDate);
                $("#endDate").datepicker("option", 'minDate', selectedDate);
                $("#endDate").datepicker("option", 'maxDate', monthsAddedDate);
            }
        });

        $("#endDate").datepicker({
            onSelect: function (selectedDate) {
                var orginalDate = new Date(selectedDate);
                var monthsAddedDate = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() - 3));
                alert(monthsAddedDate);
                $("#startDate").datepicker("option", 'minDate', monthsAddedDate);
                $("#startDate").datepicker("option", 'maxDate', selectedDate);
            }
        })
    });

答案 1 :(得分:2)

Jquery Datepicker日期范围限制30天 请参阅此链接

http://www.freshcodehub.com/Article/25/jquery-datepicker-date-range-restriction-in-aspnet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#datepicker").datepicker({ minDate: -15, maxDate: +15 });
        });
    </script>

<input type="textbox" id="datepicker">