如何使用事件监听器从输入中获取日期值？

Question

我很难弄清楚如何使用事件来控制日期选择器中的日期，例如，我单击了from date ，它应该进行控制并在datepicker中获取文本，与我的to date相同。 to date 。 无论如何要解决这个问题？ 我找不到解决方案，请帮助，这是我今天的截止日期

 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有一个onSelect事件：

选择日期选择器时调用。 该函数将选择的日期作为文本接收，并将datepicker实例作为参数接收。 这是指关联的输入字段。

演示 ：

 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>