Bonjour, je suis actuellement sur un projet de site sous Symfony. Je débute sur Symfony et j'aimerais un peux d'aide. 

Alors voilà, j'ai un graphe (Chart JS) dynamique, donc il va cherché des valeurs dans une BDD, jusque là j'arrive mais j'aimerais rajouter un filtre sur le graphique qui permet sélectionner deux dates et d'afficher les valeurs entre ces deux dates mais je bloque un peu. Ce que j'ai fais c'est que j'ai simplement changer ma requête DQL 

public function getMesuresDiffDate($idMesure, $jourDebut, $jourFin): array
    {
        return $this->createQueryBuilder('m')
            ->andWhere("m.dateHeureMesure BETWEEN :jourDebut AND :jourFin AND m.type_mesure = $idMesure")
            ->setParameter('jourDebut', $jourDebut)
            ->setParameter('jourFin', $jourFin)
            ->orderBy("m.dateHeureMesure")
            ->getQuery()
            ->getResult()
        ;
    }

Et celle-ci fonctionne avec des variables définis à la place de $jourDebut et $jourFin. Voici mon controlleur : MainController.php

#[Route('/', name: 'main_home')]
    public function statistique(MesureRepository $mesureRep, Request $request){

        $typeMesureId = 1;

        $dateDebut = $request->request->get('startdate');
        $dateFin = $request->request->get('enddate');

        //$dateDebut = "2024-03-19 00:00:00";
        //$dateFin = "2024-03-31 00:00:00";

        //$dateDebut = DateTime::createFromFormat('Y-m-d H:i:s', $dateDebut.'00:00:00');
        //$dateFin = DateTime::createFromFormat('Y-m-d H:i:s', $dateFin.'00:00:00');

        print_r($dateDebut);
        print_r($dateFin);

        //$mesures = $mesureRep->getMesuresDuJours($val);
        $mesures = $mesureRep->getMesuresDiffDate($typeMesureId, $dateDebut, $dateFin);
        $mesureDateObj = array();
        $mesureDate = [];
        $mesureVal = [];

        foreach($mesures as $mesure) {
            $mesureVal[] = $mesure->getValeur();
            $mesureDateObj[] = $mesure->getDateHeureMesure();
        }

        foreach ($mesureDateObj as $dateTimeObj) {
            $mesureDate[] = $dateTimeObj->format('Y-m-d H:i:s');
        }

        print_r($mesureDateObj);
        print_r($mesureDate);


        return $this->render('main/index.html.twig', [
            'controller_name' => 'MainController',
            'mesureVal' => json_encode($mesureVal),
            'mesureDate' => json_encode($mesureDate),
        ]);

        
    }

Il y a quelque ligne de test. et Voici mon index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Accueil{% endblock %}

{% block main_content %}

    <div class="container-fluid">
      <div class="row ">
        <div class="col">
          <div class="chartCard">
            <div class="chartBox">
              <canvas id="myChart"></canvas>
              <form action="{{ path('main_home') }}" method="post">
                <input type="date" id="startdate" name="startdate" value="#">
                <input type="date" id="enddate" name="enddate" value="#">
                <button onclick="filterData()">Filtre</button>
              </form>
            </div>
            <div class="chartBox">
              <canvas id="myChartLine1"></canvas>
            </div>
          </div>
          <div class="chartCard">
            <div class="chartBox">
              <canvas id="myChart2"></canvas>
            </div>
            <div class="chartBox">
              <canvas id="myChartLine2"></canvas>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="row">
            <div class="col">
              <div class="mbh-success mbh-notification-box">This is the success box</div>
              <div class="mbh-success mbh-notification-box">This is the success box</div>
              <div class="mbh-success mbh-notification-box">This is the success box</div>
            </div>
          </div>
          <div class="row">
            <div class="col text-center">
              <div class="sidebar_color">
                <h4>Echelle de Temps</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  
{% endblock %}

{% block javascript %}
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
    <script>

    // setup 

    const date = {{mesureDate|raw}};
    const datapoints = {{mesureVal|raw}};
    const data = {
      labels: date,
      datasets: [{
        label: '',
        data: datapoints,
        borderWidth: 1
      }]
    };

    // config 
    const config = {
      type: 'line',
      data,
      options: {
        scales: {
          x: {
            type: 'time',
            time: {
              unit: 'day',
            }
          }
        ,
          y: {
            beginAtZero: true
          }
        }
      }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );

    function filterData() {
      /*
        const dates2 = [...date];
        console.log(dates2);
        const stardate = document.getElementById('startdate');
        const enddate = document.getElementById('enddate');

        const indexstartdate = dates2.indexOf(stardate.value);
        const indexenddate = dates2.indexOf(enddate.value);

        console.log(indexstartdate);

        const filterDate = dates2.slice(indexstartdate, indexenddate + 1);

        myChart.config.data.labels = filterDate;*/
      myChart.update();
    }

    </script>
{% endblock %}

Mon problème est que lorsque j'appuis sur mon bouton filtre, rien ne ce passe, mes valeurs envoyé a mon controlleur ne sont pas envoyé. Avant de tout mettre sur ma page principale, j'ai testé sur une page de test et là ça a fonctionner mais je ne comprends pas pourquoi. 

 Quelqu'un peut-il m'aider