Utilities.js

function initializeCounterComponent(container) {
    var chart = container.querySelector('#myChart');
    inicializarChart(chart);
    var boton = container.querySelector("#counterClick");
    var title = container.querySelector("h1");
    if (boton) {
        boton.addEventListener("click", (e) => {
            let button = e.target;
            button.innerHTML = "Hola";
            title.innerHTML = "El botón ha sido clickeado!";
        });
    }

    var $fechaEntrada = $(container.querySelector('#fechaEntrada'));
    var $fechaSalida = $(container.querySelector('#fechaSalida'));

    $fechaEntrada.datetimepicker(
        { useCurrent: false }
    );

    $fechaSalida.datetimepicker();

    $fechaEntrada.on("change.datetimepicker", function (e) {
        $fechaSalida.datetimepicker('minDate', e.date);
    });
    $fechaSalida.on("change.datetimepicker", function (e) {
        $fechaEntrada.datetimepicker('maxDate', e.date);
    });
};

function inicializarChart(chart) {
    var ctx = chart.getContext('2d');

    var data = [0, 10, 5, 2, 20, 30, 45];

    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: data
            }]
        },

        // Configuration options go here
        options: {}
    });

}