HTML
            


            
PUG
            
.form-group-version2(role="radiogroup" aria-labelledby="timepicker1-title")
  .field-item.-timepicker(style='--timepicker-days-count: 3;--timepicker-horaires-count: 6;')
    p#timepicker1-title.sr-only Créneaux du lundi 1 au mercredi 3 Juillet
    button(type="button" disabled)
      span.sr-only Afficher la periode du [date début] au [date fin]
      i.maificon.maificon-arrow-left(aria-hidden="true")
    p(aria-hidden="true").jour.
      Lun

      1 Juil
    p(aria-hidden="true").jour.
      Mar

      2 Juil
    p(aria-hidden="true").jour.
      Mer

      3 Juil
    button(type="button")
      span.sr-only Afficher la periode du [date début] au [date fin]
      i.maificon.maificon-arrow-right(aria-hidden="true")

    ul.horaires
      li.sr-only Lundi 1 juillet
      li.item
        input(type="radio" id="creneaux-1-lundi" name="creneaux" value="01/07/2024 9h-10h" title="Lundi 1 juillet créneau 9h-10h")
        label(for="creneaux-1-lundi")
          span.sr-only Lundi 1 juillet créneau 
          span 9h30-10h
      li.indisponible(aria-hidden="true") —
      li.item
        input(type="radio" id="creneaux-3-lundi" name="creneaux" value="01/07/2024 11h-12h" title="Lundi 1 juillet créneau 11h-12h") 
        label(for="creneaux-3-lundi")
          span.sr-only Lundi 1 juillet créneau 
          span 11h-12h
      li.item
        input(type="radio" id="creneaux-4-lundi" name="creneaux" value="01/07/2024 14h-15h" title="Lundi 1 juillet créneau 14h-15h") 
        label(for="creneaux-4-lundi")
          span.sr-only Lundi 1 juillet créneau 
          span 14h-15h
      li.indisponible(aria-hidden="true") —
      li.item
        input(type="radio" id="creneaux-6-lundi" name="creneaux" value="01/07/2024 16h-17h" title="Lundi 1 juillet créneau 16h-17h") 
        label(for="creneaux-6-lundi") 
          span.sr-only Lundi 1 juillet créneau 
          span 16h-17h
      li.sr-only Mardi 2 juillet
      li.indisponible(aria-hidden="true") —
      li.item
        input(type="radio" id="creneaux-2-mardi" name="creneaux" value="02/07/2024 10h-11h" title="Mardi 2 juillet créneau 10h-11h")         
        label(for="creneaux-2-mardi") 
          span.sr-only Mardi 2 juillet créneau
          span 10h-11h
      li.item
        input(type="radio" id="creneaux-3-mardi" name="creneaux" value="02/07/2024 11h-12h" title="Mardi 2 juillet créneau 11h-12h")         
        label(for="creneaux-3-mardi") 
          span.sr-only Mardi 2 juillet créneau
          span 11h-12h
      li.indisponible(aria-hidden="true") —
      li.item
        input(type="radio" id="creneaux-5-mardi" name="creneaux" value="02/07/2024 15h-16h" title="Mardi 2 juillet créneau 15h-16h") 
        label(for="creneaux-5-mardi") 
          span.sr-only Mardi 2 juillet créneau
          span 15h-16h
      li.item
        input(type="radio" id="creneaux-6-mardi" name="creneaux" value="02/07/2024 16h-17h" title="Mardi 2 juillet créneau 16h-17h") 
        label(for="creneaux-6-mardi") 
          span.sr-only Mardi 2 juillet créneau
          span 16h-17h
      li.sr-only Mercredi 3 juillet - aucun créneau disponible pour ce jour
      li.indisponible(aria-hidden="true") —
      li.indisponible(aria-hidden="true") —
      li.indisponible(aria-hidden="true") —
      li.indisponible(aria-hidden="true") —
      li.indisponible(aria-hidden="true") —
      li.indisponible(aria-hidden="true") —