HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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