如何在 jQuery DateRangePicker 的 OnChange 或 OnSelect 事件后調用 Ajax？

Question

我正在嘗試從日歷中選擇日期后的 select 日期，它將使用選定的日期值調用 Ajax，但我不知道我該怎么做，在Ajax 請求中，我試圖將選定的日期代替pubdate ，以便它將請求新的日期值。

代碼

    $('#datepick').daterangepicker({ 
    opens: 'center',
    singleDatePicker: true
  },
  function(start) {
   console.log( start.format('DD-MM-YYYY') );
  }
  );
    $.ajax({
 url: "https://myimpact.in/deletearticle/services/articlelist.php",
  //need to use datepicker date in pubdate
      data:{ Pubid: 2, pubdate: "2021-02-16"},
        type: "POST",
    dataType: "JSON",
        success: function(data){
      var availableTags=[];
          for(var i=0;i<data.length; i++){
            availableTags[i] = {id: data[i].ArticleID, label: data[i].Title};
          }
   $("#head").autocomplete({
      minLength: 1,
      source: availableTags,
      select: function( event, ui ) {
       $("#head").val(ui.item.label)
        console.log(ui.item.id);
        return false;
         }
       });
},
    error: function (result) {
          alert("Error Heading");
        }

  });

在上面的代碼中，我試圖用新選擇的日期代替 pubdate，然后調用我的 Ajax 請求

Answer 1

將您的 AJAX 調用放入第一個 function，這樣 daterangepicker 將在 select 之后運行 AJAX 調用。

假設您的開始變量不在此范圍內，您可以將其傳遞到發布數據中

  $('#datepick').daterangepicker({ 
    opens: 'center',
    singleDatePicker: true
  },
  function(start) {
   console.log( start.format('DD-MM-YYYY') );

   $.ajax({
    url: "https://myimpact.in/deletearticle/services/articlelist.php",
     //need to use datepicker date in pubdate
         data:{ Pubid: 2, pubdate: start},
           type: "POST",
       dataType: "JSON",
           success: function(data){
         var availableTags=[];
             for(var i=0;i<data.length; i++){
               availableTags[i] = {id: data[i].ArticleID, label: data[i].Title};
             }
      $("#head").autocomplete({
         minLength: 1,
         source: availableTags,
         select: function( event, ui ) {
          $("#head").val(ui.item.label)
           console.log(ui.item.id);
           return false;
            }
          });
   },
       error: function (result) {
             alert("Error Heading");
           }
   
     });


  }
  );
    

Answer 2

我正在嘗試從日歷中選擇select日期，然后在選擇日期后它將調用 Ajax 並選擇日期值，但我不知道該怎么做日期值。

代碼

    $('#datepick').daterangepicker({ 
    opens: 'center',
    singleDatePicker: true
  },
  function(start) {
   console.log( start.format('DD-MM-YYYY') );
  }
  );
    $.ajax({
 url: "https://myimpact.in/deletearticle/services/articlelist.php",
  //need to use datepicker date in pubdate
      data:{ Pubid: 2, pubdate: "2021-02-16"},
        type: "POST",
    dataType: "JSON",
        success: function(data){
      var availableTags=[];
          for(var i=0;i<data.length; i++){
            availableTags[i] = {id: data[i].ArticleID, label: data[i].Title};
          }
   $("#head").autocomplete({
      minLength: 1,
      source: availableTags,
      select: function( event, ui ) {
       $("#head").val(ui.item.label)
        console.log(ui.item.id);
        return false;
         }
       });
},
    error: function (result) {
          alert("Error Heading");
        }

  });

在上面的代碼中，我試圖用新的選定日期代替 pubdate，然后調用我的 Ajax 請求