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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 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 []
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page
Centered Horizontal and Vertical Login Screen
Horizontal Login Form in Navbar with prepend
Panel Horizontal

Questions / Comments: