如何在更改而不是更改后調用 function

Question

我正在構建一個儀表板頁面，該頁面需要允許用戶 select 一個日期范圍並根據選擇更新統計信息。 我遇到的當前問題是如何在選擇第二個日期后調用 function 而無需用戶按下按鈕來更新統計信息。

HTML

<div class="date-range" style="display: none; margin: 0; border: none;">
  <label for="from_date_picker">From:</label>
  <input type="text" id="from_date_picker" class="my_date_picker" onchange="filterDate()">
  <label for="to_date_picker">To:</label>
  <input type="text" id="to_date_picker" class="my_date_picker" onclick="filterDate()" onchange="selectCampaign()">
</div>

設置 jquery 日期選擇器和默認/最小日期的函數

<script>
    // This function grabs the date from the "FROM" input and sets it as the minimum date so that the user can't select a date befor the "FROM" date
    function filterDate() {
        $("#to_date_picker").datepicker({
            minDate : $("#from_date_picker").datepicker('getDate'),
            defaultDate : "{{datetime.date}}"
        })
    }
</script>


<script>
    $(function() {
        $( "#from_date_picker" ).datepicker({
            defaultDate:"{{datetime.date}}"
        });
    });
</script>

Select 活動 Function *有多個過濾器選項，我目前只擔心填充日期選擇輸入的最后一個

<script>
    function selectCampaign(){


        var selected = $('#filter-selector').find(":selected").index()

        if (selected == 0) {
            ...
        }

        else if (selected == 1) {
            fromDate = $('#from_date_picker').datepicker('getDate')
            toDate = $('#to_date_picker').datepicker('getDate')

            alert(fromDate, toDate)
        }
    }
</script>

目前，這些警報僅顯示“FROM”輸入的日期，因為直到 function 觸發后才實際選擇“TO”選項。 我想知道如何在日期選擇完成后延遲 function 調用。 我想在不讓用戶單擊按鈕的情況下執行此操作，以便儀表板具有更動態的字段。 我怎樣才能做到這一點？

Select 從日期：

Select 迄今為止：

警報僅顯示第一個日期選擇：

Answer 1

而不是內聯 onChange 事件偵聽器，使用datepicker 組件附帶的內置onSelect

$("#to_date_picker").datepicker({
  minDate: $("#from_date_picker").datepicker('getDate'),
  defaultDate: "{{datetime.date}}",
  onSelect: function(dateText) {
    console.log("Selected date: " + dateText + "; input's current value: " + this.value);
    selectCampaign()
  }
})