Question

有一种方法可以添加多个jQuery Date pickers，但我正在努力在一个页面上实现多个jQuery Date Range Picker。
这是我到目前为止所做的http://jsfiddle.net/ZJRHx/1/

<div class="demo">
    <div class="settings">
        <label for="from">From</label>
<input type="text" id="from" name="from" class="pdate"/>
<label for="to">to</label>
<input type="text" id="to" name="to" class="fdate"/>
    </div>
    <div class="settings">
        <label for="from">From</label>
<input type="text" name="from" class="pdate"/>
<label for="to">to</label>
<input type="text" name="to" class="fdate"/>
    </div>
</div>



$('.demo').find('.settings').each(function() {
        var dates = $(this).find( ".pdate, .fdate" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            onSelect: function( selectedDate ) {
                var option = $(this).class == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );

                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });

但是我能够解决范围部分。

Answer 1

您正在从jqueryui.com中包含jquery ui，这是不允许的，并且会导致文件无法正确加载。以下是您的代码主要使用的小提琴：http://jsfiddle.net/ZJRHx/2/

Answer 2

这就是我的做法：首先，您将输入嵌套以接收日期范围：

<div class="date_range">
     <input class="date_min calendar" name="min" />
    <input class="date_max calendar" name="max" /></div>

然后你创建这个脚本：

var dates = $( ".date_min, .date_max" ).datepicker({
        changeMonth: true,
        changeYear:true,
        onSelect: function( selectedDate ) {
            var option = $(this).hasClass("date_min") ? "minDate" : "maxDate",
            brother = $(this).hasClass("date_min") ? ".date_max" : ".date_min",
            instance = $( this ).data( "datepicker" ),
            date = $.datepicker.parseDate(
            instance.settings.dateFormat ||  $.datepicker._defaults.dateFormat,
            selectedDate, instance.settings );
            dates.closest(brother).datepicker( "option", option, date );
        },
        beforeShow:function(){
            var brother =$(this).hasClass("date_min") ? ".date_max" : ".date_min",
            option = $(this).hasClass("date_max") ? "minDate" : "maxDate";
            if($(this).siblings(brother).val() == ""){
               dates.datepicker("refresh").datepicker("option", option, null);
            }
        }
    });

我使用此代码发送日期以过滤不同的图表，它就像一个魅力。

多个jQuery UI日期范围选择器

2 个答案: