jQuery ui onSelect（）函數 - 我需要兩件事情發生

我很難在觸發onSelect（）方法時發生兩件事。當他們獨處時，我可以讓這些功能中的任何一個工作，但無法讓他們都發生。請參閱代碼。這裏有一個小提琴：http://jsfiddle.net/RxTax/119/jQuery ui onSelect（）函數 - 我需要兩件事情發生

<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>

來源

2014-01-06 Mark

您將覆蓋第二個代碼塊中的選項，而不是添加到該選項。如果你想做兩件事，把它們放在一個函數中。 – Barmar

我嘗試過但沒有成功。我暫時還不熟悉編寫腳本。 – Mark

你可以嘗試抽象出來爲獨立的功能，然後只需調用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方法像我這樣做，我幾乎可以保證你可以做到。如果可以的話，這將完成相同的任務：使用多個參數的單個綁定。

來源

2014-01-06 22:06:39 PlantTheIdea

在一個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); 
    } 
});

來源

2014-01-06 21:54:04 Barmar

jQuery ui onSelect（）函數 - 我需要兩件事情發生

回答

相關問題