Componente de mês e ano com botões - bootstrap 5

Veja este exemplo de código em nosso playground!

Com opção de escolha mês e ano - #bootstrap 5 e #javascript puro. Responsivo e com #exemplo para busca de dados via API.

Este #componente é prático e intuitivo para que o usuário selecione períodos em #mes ou #ano sem a necessidade de digitar porque utiliza #buttons como manipulação.

Melhorias são sempre uma boa evolução para a ideia e o código é livre baixa baixar, modificar e compartilhar.

{label: "Agosto", mes: "8", ano: "2020"}
ano: "2020"
label: "Agosto"
mes: "8"
__proto__: Object

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Div meses</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>
<!-- created by @BrCodeSnippets -->

<body>
  <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>

<script type="text/javascript">
  // 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;
  }
</script>

</html>

Javascript

// 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;
  }

Demonstração