Question

当触发onSelect（）方法时，我很难完成两件事。我可以让它们中的任何一个在单独使用时工作，但不能让它们发生。请参阅代码。这是一个小提琴：http://jsfiddle.net/RxTax/119/

<div class="formInput">
    <label for="startDatePicker">Check-in:</label>
    <input type="text" id="start" name="check-in" size="30" class="textInput">
</div>

<div class="formInput">
    <label for="endDatePicker">Check-out:</label>
    <input type="text" id="end" name="check-out" size="30" class="textInput">
</div>

<script>
    $("#start").datepicker({
        onSelect: function(date) {
            var selectedDate = new Date(date);
            var endDate = new Date(selectedDate.getTime());
            $("#end").datepicker( "option", "minDate", endDate );
        }
    });


$( "#start" ).datepicker({
    onSelect: function(dateText, inst) {
        $("#end").datepicker( "setDate" , dateText )
    }
});

    $("#end").datepicker();
</script>

Answer 1

在一个onSelect函数中执行这两项操作。

$("#start").datepicker({
    onSelect: function(dateText, inst) {
        var selectedDate = inst.datepicker('getDate');
        var endDate = new Date(selectedDate.getTime());
        $("#end").datepicker( "option", "minDate", endDate )
                 .datePicker("setDate", selectedDate);
    }
});

Answer 2

您可以尝试将它们抽象为单独的函数，然后在onSelect中调用这些函数：

$(function(){
    var $end = $('#end'),
        dateFuncs = {
            endDate:function(dt){
                var selectedDate = new Date(dt),
                    endDate = new Date(selectedDate.getTime());

                $end.datepicker('option','minDate',endDate);
            },
            setDate:function(dt){
                $end.datepicker('setDate',dt);
            }
        };

    $('#start').datepicker({
        onSelect:function(date,inst){
            dateFuncs.endDate(date);
            dateFuncs.setDate(date);
        }
    });
});

这允许您创建所需的任何其他函数，只有一个绑定事件，并保持代码维护简单。

您可能尝试的其他方法是使用对象方法：

$('#start').datepicker({
    onSelect:function(dateText,inst){
        var selectedDate = new Date(dateText),
            endDate = new Date(selectedDate.getTime());

        $('#end').datepicker({
            setDate:dateText,
            option:{
                minDate:endDate
            }
        });
    }
});

我不能说我以前见过人们使用过这个，但是像我一样了解jQuery方法几乎可以保证你能做到。如果可以，这将完成相同的任务：单个绑定多个参数。

jQuery ui onSelect（）函数 - 我需要做两件事

2 个答案: