Javascript - datepicker does not send new values ​​when changing

Question

I use this datepicker on my page, where I have and from fields, and I'm trying to send a new value to the datepicker fields every time I change to them using an ajax call to the server. But in the console, I see that I am sending a default value, which is the time now, every time.

This is my script:

$(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
         }]
     });
   });
  }

});

Updated code:

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

When I do so, if I do console.log("From: " + dateFrom + "\ To: " + dateTo);, I get: 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().