Question

我在我的页面上使用this datepicker，我有来往的字段，我正在尝试使用ajax调用服务器在每次更改时发送datepicker字段的新值。但是在控制台中，我发现我每次都发送默认值，现在是时间。

这是我的剧本：

$(document).ready(function() {

  //datepicker
  var date = new Date();
  var date = date.toDateString();
  $('#datePicker, #datePicker1').fdatepicker({
        closeButton: false,
    initialDate: date,
        format: 'dd.mm.yyyy',
    }).on('changeDate', function (ev) {
    timelines();
  });

  var dateFrom = $("#datePicker").val().split(".").reverse().join("-");
  var dateTo = $("#datePicker1").val().split(".").reverse().join("-");

  //timeline charts
  $("#timelines").on("change", function() {
    timelines();
  }).trigger("change");

  function timelines(){

   //get the value of selected chart option and send data to the server
   var value = $("#timelines").find(":selected").val();
   $.post("http://myapp.app/admin/statistics/timelines", {
       '_token' : $('meta[name="csrf-token"]').attr('content'),
       'option': value,
       'from': dateFrom,
       'to': dateTo,
     },
     function(data, status){
       console.log("Data: " + data + "\nStatus: " + status);
       categories = Array();
       views = Array();
       var cleanData = $.parseJSON(data);
       $.each(cleanData, function(key, value) {
         categories.push(value.time);
         views.push(value.count);
       });

       //create a chart
       $('#lineCharts').highcharts({
         chart: {
           plotBackgroundColor: null,
           plotBorderWidth: 0,
           plotShadow: false,
           backgroundColor: '#2A2E34'
         },
         credits: {
           enabled: false
         },
         exporting: {
               enabled: false
         },
         xAxis: {
             categories: categories
         },
         yAxis: {
             title: {
                 text: false
             },
             plotLines: [{
                 value: 0,
                 width: 1,
                 color: '#808080'
             }]
         },
         legend: {
             layout: 'vertical',
             align: 'right',
             verticalAlign: 'middle',
             borderWidth: 0
         },
         series: [{
             name: 'Views',
             data: views
         }]
     });
   });
  }

});

更新的代码：

//datepicker
  var date = new Date();
  var date = date.toDateString();
  $('#datePicker, #datePicker1').fdatepicker({
        closeButton: false,
    initialDate: date,
        format: 'dd.mm.yyyy',
    }).on('changeDate', function (ev) {
    var dateFrom = $("#datePicker").val().split(".").reverse().join("-");
    var dateTo = $("#datePicker1").val().split(".").reverse().join("-");
    timelines(dateFrom, dateTo);
    barCharts(dateFrom, dateTo);
  });


  //timeline charts
  $("#timelines").on("change", function() {
    timelines();
  }).trigger("change");

  function timelines(dateFrom, dateTo){

   //get the value of selected chart option and send data to the server
   var value = $("#timelines").find(":selected").val();
   $.post("http://myapp.app/admin/statistics/timelines", {
       '_token' : $('meta[name="csrf-token"]').attr('content'),
       'option': value,
       'from': dateFrom,
       'to': dateTo,
     },
   //rest of the code...

当我这样做时{I} console.log("From: " + dateFrom + "\ To: " + dateTo);我得到：From: undefined To: undefined。

Answer 1

您在拨打时间轴（）前设置dateFrom和dateTo。那时，它们都被设置为默认的datepicker日期now。

如果您将所需的内容作为参数传递给timelines()，那将是更清晰的代码。例如：

function timelines(dateFrom, dateTo){

   //get the value of selected chart option and send data to the server
   var value = $("#timelines").find(":selected").val();
   $.post("http://myapp.app/admin/statistics/timelines", {
       '_token' : $('meta[name="csrf-token"]').attr('content'),
       'option': value,
       'from': dateFrom,
       'to': dateTo,
     },
     function(data, status){
       console.log("Data: " + data + "\nStatus: " + status);
       categories = Array();
       views = Array();
       var cleanData = $.parseJSON(data);
       $.each(cleanData, function(key, value) {
         categories.push(value.time);
         views.push(value.count);
       });

       //everything else...
     });
   });
  }

});

问题是，在调用时间轴时如何获得dateTo和dateFrom？您可以使用以下事件中的日期：ev.date.valueOf()并将其传递给您对timelines()的通话。

Javascript - datepicker不会在更改时发送新值

1 个答案: