How can I get the Value of date from an input using event listeners?

Question

I'm having a hard time figuring out on how can I console the dates in my date-pickers using an event, So for example I clicked the from date, it should console and get the text in the datepicker, same as to my to date. Anyway to solve this? I can't find a solution for this, please I need help, it's my deadline today

var chartData1 = [];

generateChartData();

function generateChartData() {
  var firstDate = new Date();
  firstDate.setDate(firstDate.getDate() - 500);
  firstDate.setHours(0, 0, 0, 0);

  for (var i = 0; i < 500; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);

    var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
    var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
    chartData1.push({
      "date": newDate,
      "value": a1,
      "volume": b1
    });
  }
}

var chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "extendToFullPeriod": false,

  "dataSets": [{
      "title": "first data set",
      "fieldMappings": [{
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "volume",
        "toField": "volume"
      }],
      "dataProvider": chartData1,
      "categoryField": "date"
    }],

  "panels": [{

      "showCategoryAxis": false,
      "title": "Value",
      "percentHeight": 70,

      "stockGraphs": [{
        "id": "g1",

        "valueField": "value",
        "comparable": true,
        "compareField": "value",
        "balloonText": "[[title]]:<b>[[value]]</b>",
        "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
      }],

      "stockLegend": {
        "periodValueTextComparing": "[[percents.value.close]]%",
        "periodValueTextRegular": "[[value.close]]"
      }
    },

    {
      "title": "Volume",
      "percentHeight": 30,
      "stockGraphs": [{
        "valueField": "volume",
        "type": "column",
        "showBalloon": false,
        "fillAlphas": 1
      }],

      "stockLegend": {
        "periodValueTextRegular": "[[value.close]]"
      }
    }
  ],

  "chartScrollbarSettings": {
    "graph": "g1"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true,
    fullWidth: true,
    cursorAlpha: 0.1
  },

  "periodSelector": {
    "position": "left",
  },

  "dataSetSelector": {
    "position": "left"
  }
});

chart.addListener('rendered', function(event) {
  var dataProvider = chart.dataSets[0].dataProvider;
  $(".amChartsPeriodSelector .amChartsInputField").datepicker({
    "dateFormat": "dd-mm-yy",
    "minDate": dataProvider[0].date,
    "maxDate": dataProvider[dataProvider.length - 1].date,
    "onClose": function() {
      $(".amChartsPeriodSelector .amChartsInputField").trigger('blur');
    }
  });
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  font-family: Verdana;
}

#chartdiv {
	width: 100%;
	height: 100%;
}

<!-- jQuery stuff -->
<link rel="stylesheet" media="all" href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

<!-- amCharts -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>

Answer 1

jQuery Datepicker has a onSelect event:

Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.

Demo:

var chartData1 = [];

generateChartData();

function generateChartData() {
  var firstDate = new Date();
  firstDate.setDate(firstDate.getDate() - 500);
  firstDate.setHours(0, 0, 0, 0);

  for (var i = 0; i < 500; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);

    var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
    var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
    chartData1.push({
      "date": newDate,
      "value": a1,
      "volume": b1
    });
  }
}

var chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "extendToFullPeriod": false,

  "dataSets": [{
      "title": "first data set",
      "fieldMappings": [{
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "volume",
        "toField": "volume"
      }],
      "dataProvider": chartData1,
      "categoryField": "date"
    }],

  "panels": [{

      "showCategoryAxis": false,
      "title": "Value",
      "percentHeight": 70,

      "stockGraphs": [{
        "id": "g1",

        "valueField": "value",
        "comparable": true,
        "compareField": "value",
        "balloonText": "[[title]]:<b>[[value]]</b>",
        "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
      }],

      "stockLegend": {
        "periodValueTextComparing": "[[percents.value.close]]%",
        "periodValueTextRegular": "[[value.close]]"
      }
    },

    {
      "title": "Volume",
      "percentHeight": 30,
      "stockGraphs": [{
        "valueField": "volume",
        "type": "column",
        "showBalloon": false,
        "fillAlphas": 1
      }],

      "stockLegend": {
        "periodValueTextRegular": "[[value.close]]"
      }
    }
  ],

  "chartScrollbarSettings": {
    "graph": "g1"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true,
    fullWidth: true,
    cursorAlpha: 0.1
  },

  "periodSelector": {
    "position": "left",
  },

  "dataSetSelector": {
    "position": "left"
  }
});

chart.addListener('rendered', function(event) {
  var dataProvider = chart.dataSets[0].dataProvider;
  $(".amChartsPeriodSelector .amChartsInputField").datepicker({
    "dateFormat": "dd-mm-yy",
    "minDate": dataProvider[0].date,
    "maxDate": dataProvider[dataProvider.length - 1].date,
    "onClose": function() {
      $(".amChartsPeriodSelector .amChartsInputField").trigger('blur');
    },
    "onSelect": function(dateText) {
      console.log('date:', dateText);
    }
  });
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  font-family: Verdana;
}

#chartdiv {
	width: 100%;
	height: 100%;
}

<!-- jQuery stuff -->
<link rel="stylesheet" media="all" href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

<!-- amCharts -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>