![](/img/trans.png)
[英]Setting date min and max limit for DatePicker in Angular 8 in typescript globally for the application
[英]Datepicker not setting max and min 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>
從minDate
和maxDate
文檔:
minDate
支持多種類型:
包含最小日期的日期對象。
由
dateFormat
option或相對日期定義的格式的字符串。
您的日期格式為yyyy-mm-dd
,但您的dateFormat
選項為dd-mm-yy
。
也就是說,請注意文檔中提到它們可以是日期對象。 您可以通過將字符串包裝在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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.