"Horizontal Bar with Months of the Year - bootstrap 5.1.3"
Bootstrap 4.1.1 Snippet by BrCodeSnippets

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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/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"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>
// 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; }

Related: See More

Awesome Landing Page
Centered Horizontal and Vertical Login Screen
Horizontal Login Form in Navbar with prepend
Panel Horizontal

Questions / Comments: