如何限制基于另一个日期的jQuery-ui datepicker的最小和最大日期 [英] How to constrain min and max dates for jQuery-ui datepicker based on another date

问题描述

我想知道如何在入住日期之间设定退房日期。喜欢我们选择6月份（当月是2月）和第15天。所以它有权选择30天之间的一天（30限制）。所以结束日期是：7月15日。这里我们有一个代码：

I would like to know how can we set the check-out date between the check-in date. Like if we select the month of June (when current month is February) and the 15th day. So it gives the authority to select the day between 30 days(30 limit). So the end date would be: 15 July. Here we have a code:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/black-tie/jquery-ui.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<style type="text/css">
body{ font: 60.0% "Trebuchet MS", sans-serif; margin: 50px; }
</style>
<script type="text/javascript">
    $(function() {
        $('#from').datepicker({
            numberOfMonths: 2,
            firstDay: 1,
            dateFormat: 'DD dd-mm-yy',
            minDate: '0',
            maxDate: '+2Y',
            onSelect: function(dateStr) {
                var min = $(this).datepicker('getDate');
                $('#to').datepicker('option', 'minDate', min || '0');
                datepicked();
            } 
        });
        $('#to').datepicker({
            numberOfMonths: 2,
            firstDay: 1,
            dateFormat: 'DD dd-mm-yy',
            minDate: '0',
            maxDate: '+2Y',
            onSelect: function(dateStr) {
                var max = $(this).datepicker('getDate');
                $('#from').datepicker('option', 'maxDate', max || '+2Y');
                datepicked();
            } 
        });
    });
    var datepicked = function() {
        var from = $('#from');
        var to = $('#to');
        var nights = $('#nights');
        var fromDate = from.datepicker('getDate')
        var toDate = to.datepicker('getDate')
        if (toDate && fromDate) {
            var difference = 0;
            var oneDay = 1000 * 60 * 60 * 24;
            var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay);
            nights.val(difference);
        }
    }
</script>
<input type="text" id="from" name="from" size="28" style="width:194px; /*Tag Style*/" value="" >
<input type="text" id="to" name="to" size="28" style="width:194px; /*Tag Style*/" value="" >
<input type="text" id="nights" name="nights" size="4" style="width:50px; /*Tag Style*/" value="" readonly="readonly">

我们的主要动机是制作此代码，办理入住手续，退房和退房。入住日期可能在2012-2013年的任何一个月，退房日期仅为30天后的入住日期，总晚上仅为30晚。

Our Main motive is to make this code, for check-in, check out and nights. In which check-in dates can be any month in 2012-2013, and Check - out date will only be the check-in date after 30 days, and the total nights will be 30 nights only.

推荐答案

看看此演示。我在onSelect事件中添加了一些行：

Have a look at this demo. I've added some lines in the onSelect event like so:

    onSelect: function(dateStr) {
        var d1 = $(this).datepicker("getDate");
        d1.setDate(d1.getDate() + 0); // change to + 1 if necessary
        var d2 = $(this).datepicker("getDate");
        d2.setDate(d2.getDate() + 30); // change to + 29 if necessary
        $("#to").datepicker("setDate", null);
        $("#to").datepicker("option", "minDate", d1);
        $("#to").datepicker("option", "maxDate", d2);
        datepicked();
    }

根据我对住宿业务的理解，日期应该是包容性的 - 即2012年6月/ 15日+ 30夜应为2012年6月/ 14日。但是我已经按照你在前几行提到的例子。

According to my understanding of lodging business, the dates should be inclusive -- i.e. June/15/2012 + 30 nights should be June/14/2012. But I've followed the example you mentioned in the first few lines of question.

这篇关于如何限制基于另一个日期的jQuery-ui datepicker的最小和最大日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！