Bootstrap html snippet. Horizontal Bar with Months of the Year

HTML code

Clean, semantic HTML that powers this Bootstrap 5.1.3 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>
    <!-- created by @BrCodeSnippets -->
    <div class="container-full mt-3">
        <div class="row m-0">
            <div class="col-12">
                <label for="">Selecione ano</label>
                <select class="form-select mb-3" name="ano" id="ano">
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                    <option value="2022">2022</option>
                    <option value="2023">2023</option>
                    <option value="2024">2024</option>
                    <option value="2025">2025</option>
                </select>
                <div class="btn-group d-flex" role="group" aria-label="..." id="meses">
                </div>
                <div class=" alert-secondary fs-2 my-2 text-center p-3" id="mes">
                </div>
                Mês selecionado:
                <input id="inputMes" class="form-control" type="text" name="" value="" placeholder="Selecione um mês acima">
                <button class="btn btn-success w-100 mt-3 shadow" type="button" name="button">Avançar</button>
            </div>
        </div>
    </div>
</body>

</html>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 5.1.3 to keep the design, spacing, and responsiveness consistent.

body{margin-top:20px;}

Javascript/Jquery code

Lightweight JS to power any interactions this snippet needs. Drop it under your scripts (after Bootstrap 5.1.3) to mirror the live demo.

// meses
  let dateNow = new Date();
  let mesAtual = dateNow.getMonth();
  let anoAtual = dateNow.getFullYear();
  let divMes = document.getElementById("mes");
  let divMeses = document.getElementById("meses");
  let inputMes = document.getElementById("inputMes");
  let inputAno = document.getElementById("ano");
  // aqui pode ser internacionalizado
  let meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
  let btnEsquerdo = ' <a data-acao="anterior"  class="btn btn-success" href="#">  << <i class="fa fa-arrow-left" aria-hidden="true"></i>  </a> ';
  let btnDireito = ' <a data-acao="proximo"  class="btn btn-success" href="#">  <i class="fa fa-arrow-right" aria-hidden="true"></i> >> </a> ';

  divMes.innerHTML = meses[mesAtual]; //((d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1));

  function render(mesAtual) {
    mesAtual = (mesAtual < 1) ? 1 : ((mesAtual >= 11) ? 10 : mesAtual);
    htmlMeses = "";
    mesAnterior = (mesAtual - 1);
    mesProximo = (mesAtual + 1);

    htmlMeses += btnEsquerdo;

    for (i = mesAnterior; i <= mesProximo; i++) {
      htmlMeses += '<button id="m-' + (i + 1) + '" data-mes="' + (i + 1) + '" href="#" class="btn btn-info w-100"> ' + meses[i] + ' </button>';
    }

    htmlMeses += btnDireito;

    divMeses.innerHTML = htmlMeses;

  }
  // load
  render(mesAtual);

  // ações dentro da div meses []

  document.getElementById('meses').addEventListener('click', async function() {

    event.preventDefault();
    let target = event.target;

    if (target.tagName == 'A') {
      let acao = target.getAttribute('data-acao');
      mesAtual = (acao == "anterior") ? ((mesAtual < 2) ? 10 : ((mesAtual > 10) ? 10 : (mesAtual - 1))) : ((mesAtual <= 9) ? (mesAtual + 1) : 1);
    }

    if (target.tagName == 'BUTTON') {

      // Aqui poderíamos ter uma async function para um API buscar dados externos...
      const dados = await getData({
        label: meses[target.getAttribute('data-mes') - 1],
        mes: target.getAttribute('data-mes'),
        ano: inputAno.value
      });

      data_mes = target.getAttribute('data-mes');
      divMes.innerHTML = dados;
      inputMes.value = target.getAttribute('data-mes') + ' - ' + meses[target.getAttribute('data-mes') - 1];
    }
    render(mesAtual);
  });

  // Exemplo
  async function getData(obj) {
    console.log(obj);
    return 'Dados de (mes ' + obj.mes + ') ' + obj.label + ' de ' + obj.ano;
  }