Question

我在网站上做了一些报道，我需要一个只显示年份的日期选择器。我不知道为什么第一次点击datepicker会显示一个完整的日历，但如果我关闭它并再次点击它就可以正常工作（不再重新加载页面）。

<body onload="carga_grafica()">

<?php   if (login_check($mysqli) == true) : ?>  

<div class="container" style="margin-top:10px">
    <!-- Main component for a primary marketing message or call to action -->
    <div class="jumbotron">
        <form class="form-inline">

            <div class="col-md-4">
                <label for="periodo">Selecciona periodo:</label>
                <input class="form-control" style="width: 100px;" name="periodo" id="periodo" onchange="drawVisualization();" type="text">
            </div>
            <div class="col-md-4">
                <label for="periodo">Tipo de gráfica:</label>
                <select name="type" id="type" class="form-control" onchange="drawVisualization();">
                    <option value="0" selected>Areas</option>
                    <option value="1">Lineas</option>
                    <option value="2">Columnas</option> 
                </select>
            </div>

        </form>

        <hr>

        <div id="chart_div" style="width: 100%; height: 450px;"></div>

    </div>

</div> <!-- /container -->

    <link rel="stylesheet" href="../css/bootstrap-datepicker3.min.css" />
    <script type="text/javascript" src="../js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-datepicker.es.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">

        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawVisualization);

        function errorHandler(errorMessage) {
            //curisosity, check out the error in the console
            console.log(errorMessage);
            //simply remove the error, the user never see it
            google.visualization.errors.removeError(errorMessage.id);
        }

        function drawVisualization() {
            // Some raw data (not necessarily accurate)
            var periodo=$("#periodo").val();//Datos que enviaremos para generar una consulta en la base de datos
            var jsonData= $.ajax({
                    url: 'chart.php',
                    data: {'periodo':periodo,'action':'ajax'},
                    dataType: 'json',
                    async: false
                }).responseText;

            var obj = jQuery.parseJSON(jsonData);
            var data = google.visualization.arrayToDataTable(obj);

            var options = {
                title : 'REPORTE DE INGRESOS '+periodo,
                vAxis: {title: 'Euros'},
                hAxis: {title: 'Meses'},
                //seriesType: 'bars',
                series: {5: {type: 'line'}}
            };

            if (document.getElementById("type").value == 0) {
                var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
            }
            if (document.getElementById("type").value == 1) {
                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            }
            if (document.getElementById("type").value == 2) {
                var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            }
            google.visualization.events.addListener(chart, 'error', errorHandler);
            chart.draw(data, options);
        }

        // Haciendo los graficos responsivos
        jQuery(document).ready(function(){
            jQuery(window).resize(function(){
                drawVisualization();
            });
        });

        function carga_grafica(){
            $("#periodo").datepicker("setDate", new Date());
            drawVisualization();
        }

        $(document).ready(function() {

            $("#periodo").datepicker({
                format: " yyyy",
                viewMode: "years", 
                minViewMode: "years",
                autoclose: true
            });

        });

    </script>

    <?php endif; ?>

</body>

Datapicker在第一次单击时错误地显示完整日历

0 个答案: