Datepicker not setting max and min value

Question

I'm setting my minimum value and max value using the sample data in my push function to show it in the date picker. But when I click the date picker, it shows the wrong min and max value, what's wrong with my code? I used this to get the min and max value

"minDate": dataProvider[0].date, "maxDate":dataProvider[dataProvider.length - 1].date,

var chartData1 = [];


generateChartData();

function generateChartData() {
    chartData1.push(
    {
        "date": "2012-10-11",
        "value": 33
    }, {
        "date": "2012-12-12",
        "value": 50
    }, {
        "date": "2012-12-13",
        "value": 10
    }, {
        "date": "2012-12-14",
        "value": 100
    }, {
        "date": "2013-12-15",
        "value": 30
    });
    
  
}

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",
    "periods": [{
      "period": "MM",
      "selected": true,
      "count": 1,
      "label": "1 month"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1 year"
    }, {
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    }]
  },

  "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

From the minDate and maxDate documentation:

minDate

Multiple types supported:

• A date object containing the minimum date.

• A string in the format defined by the dateFormat option, or a relative date.

Your dates are in the format yyyy-mm-dd, but your dateFormat option is dd-mm-yy.

That said, notice the documentation mentions that they can be date objects. You could convert your strings to date objects by wrapping them in new Date(...).

"minDate": new Date(dataProvider[0].date),
"maxDate": new Date(dataProvider[dataProvider.length - 1].date),

var chartData1 = [];


generateChartData();

function generateChartData() {
  chartData1.push({
    "date": "2012-10-11",
    "value": 33
  }, {
    "date": "2012-12-12",
    "value": 50
  }, {
    "date": "2012-12-13",
    "value": 10
  }, {
    "date": "2012-12-14",
    "value": 100
  }, {
    "date": "2013-12-15",
    "value": 30
  });


}

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",
    "periods": [{
      "period": "MM",
      "selected": true,
      "count": 1,
      "label": "1 month"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1 year"
    }, {
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    }]
  },

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

chart.addListener('rendered', function(event) {
  var dataProvider = chart.dataSets[0].dataProvider;
  $(".amChartsPeriodSelector .amChartsInputField").datepicker({
    "dateFormat": "dd-mm-yy",
    "minDate": new Date(dataProvider[0].date),
    "maxDate": new Date(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>