如何在 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 请求