Jump to content
Rafael_Ferreira

Datetimepicker do Bootstrap fica português só testando com o Wampserver ao passar para um domínio fica em inglês.

Recommended Posts

Datetimepicker do Bootstrap fica português só fora da internet testando no Wampserver passando para um domínio o datetimepicker funciona só que fica em inglês.

Código:

 

<!DOCTYPE html>

<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

        <link href="css/bootstrap-combined.min.css" rel="stylesheet"/>
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>


<script src="js/bootstrap-datetimepicker.min.js"></script> 
<script src="js/bootstrap-datetimepicker.pt-BR"></script>
<body>
</head>
<div class="container">
<div class="row justify-content-center">
<table class="table">
<thead>

<th>&nbsp;ID_Cliente</th>
<th>Preço</th>

<th>Quantidade</th>
<th>Total dos Serviços</th>
<th>Forma de Pagamento</th>
<th>Data</th>
<th Colspan="9">Ação

</th>
</thead>

<button type="button" class="btn btn-dark">Cliente</button>
<button type="button" class="btn btn-secondary">Caixa</button>
<button type="button" class="btn btn-primary">Relatorio1</button>
<button type="button" class="btn btn-success">Relatorio2</button>

<tbody>
  <tr>
      <td>&nbsp;1</td>
      <td>148,00</td>
  <td>1,0</td>
  <td>188,0</td>
  <td>Dinheiro a vista</td>
  <td>2011-08-19-13:45:00</td>


<td>
<button type="button" class="btn btn-info">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>   
</tr>
<tr>
      <td>&nbsp;2</td>
      <td>308,00</td>
  <td>1,0</td>
  <td>399,23</td>
  <td>Débito no cartão</td>
  <td>2011-08-20-22:45:00</td>
<td>
<button type="button" class="btn btn-info">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>   
</tr>


</table>
</div>

<BR>
<BR>
<BR>





<div class="row justify-content-center">
<form action="" method="POST">
<div class="form-group row">
<div class="col-xs-8">
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Serviços</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>Escolha</option>
    <option value="1">Corte</option>
    <option value="2">Hidratação</option>
    <option value="3">Coloração</option>
<option value="4">Relaxamento</option>
<option value="5">Progressiva</option>
<option value="6">Escova</option>
  </select>
</div>
</div>
</div>

<div class="form-group row">
<div class="col-xs-8">
 <label for="cod">ID_Cliente:</label>
 <input type="text" class="form-control" id="cod" aria-describedby="name" placeholder="">
</div>
</div>
<div class="form-group row">
<div class="col-xs-8">
 <label for="preco">Preço:</label>
 <input type="text" class="form-control" id="preco" aria-describedby="name" placeholder="">
</div>
</div>


<div class="form-group row">
<div class="col-xs-8">
<label for="Quantidade">Quantidade:</label>
 <input type="text" class="form-control" id="quantidade" aria-describedby="quantidade" placeholder="">
</div>
</div>
<div class="form-group row">
<div class="col-xs-8">
<label for="totaldeserv">Total dos Serviços:</label>
 <input type="text" class="form-control" id="totaldeserv" aria-describedby="totaldeserv" placeholder="">
</div>
</div>
<div class="form-group row">
<div class="col-xs-8">
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Forma de Pagamento:</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>Escolha</option>
    <option value="1">Cartão de crédito</option>
    <option value="2">Cartão de débito</option>
    <option value="3">Dinheiro</option>

  </select>
</div>
</div>
</div>

<div id="datetimepicker" class="input-append date">
      <label for="totaldeserv">Data_Horário</label>
  <input type="text"></input>
      <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
</div>

<div class="form-group row">
<div class="col-xs-8">
<button type="submit" name="save" class="btn btn-primary">Salvar</button> 
</div>
</div>
</div>
</form>
</div>
</div>

    <script type="text/javascript">
      $('#datetimepicker').datetimepicker({
        format: 'dd/MM/yyyy hh:mm:ss',
        language: 'pt-BR'
      });
    </script>
</body>
</html>

----------------------------------------------------------------------------------------------

/**
 * Brazilian translation for bootstrap-datetimepicker
 * Cauan Cabral <cauan@radig.com.br>
 */
;(function($){
$.fn.datetimepicker.dates['pt-BR'] = {
days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo"],
daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "---", "Sáb", "Dom"],
daysMin: ["Do", "Se", "Te", "Qu", "Qu", "Se", "Sa", "Do"],
months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
today: "Hoje"
};
}(jQuery));

Share this post


Link to post
Share on other sites

@Rafael_Ferreira

 

Na escrita do include do datapicker está faltando a extensão .js

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By tomas.david100
      Boa tarde tenho a seguinte dúvida será possível utilizar um css só para o menu lateral e outro css para o body? Vou deixar uma imagen a seguir para se perceber melhor.
       

    • By astolpho
      eu gostaria de saber como posso "desativar" ou "ativar" uma class a partir do php, clicando o botão. 
       
       
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="vieport" content="width=device-widht, initial-scale=1.0">
          <meta http-equiv="X-UA-Comapatible" content="ie=edge">
          <title>Barra de Progesso Oficial</title>
          <style type="text/css">
              
              .container{
                  width: 100%;
              }
              .step-pog-bar{
                  margin-top: 20%;
                  counter-reset: step;
              }
              .step-pog-bar li{
                  list-style: none;
                  float: left;
                  width: 20%;
                  position: relative;
                  text-align: center;
              }
              .step-pog-bar li::before{
                  content: counter(step);
                  counter-increment: step;
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  border: 2px solid #ddd;
                  display: block;
                  text-align: center;
                  margin: 0 auto 10px auto;
                  border-radius: 50%;
                  background-color: #fff;
              }
              .step-pog-bar li::after{
                  content: '';
                  position: absolute;
                  top: 15px;
                  left: -50%;
                  border: 2px solid #ddd;
                  width: 100%;
                  z-index: -1;
              }
              
              .step-pog-bar li:first-child::after{
                  content: none;
              }
              .step-pog-bar li.active{
                  color: chartreuse;
              }
              .step-pog-bar li.active::before{
                  border-color: chartreuse;
              }
              .step-pog-bar li.active + li::after{
                  border-color: chartreuse;
              }
              .btn{
                  margin-top: 100px;
                  position: absolute;
                  margin-left: 20%;
              }
              .btn_D{
                  margin-top: 100px;
                  position: absolute;
                  margin-left: 10%;
              }
       
          </style>
      </head>
      <body>
          <div class="btn">
              <input type="submit" value="ativar">
          </div>
          <div class="btn_D">
              <input type="submit" value="Desativar">
          </div>
          <div class="container">
              <ul class="step-pog-bar">
                  <li class="active">Canal Dentario</li>
                  <li class="active">Limpeza</li>
                  <li class="active">Clareamento</li>
                  <li class="active">Escovação</li>
                  <li>Conclusão</li>
              </ul>
          </div>
      </body>
      </html>
    • By devfelipemonteiro
      tegcommerce - plataforma de e-commerce open source
      https://tegcommerce.org
      https://github.com/tegcommerce
      https://t.me/tegcommerce
       
      objetivo
      do brasil para o mundo a maior plataforma de e-commerce open source
       
      skills necessários
      qualquer contribuição é bem vinda
       
      acesse nosso grupo do telegram: https://t.me/tegcommerce
       
      projetos similares
      wordpress e woocommerce
      drupal
      joomla
      magento

    • By rafalbino
      Fala pessoal! Tô com uma dúvida na versão mobile do meu menu.
      A versão desktop já está tudo ok, porém, quando acesso pelo mobile, ele aparece apenas um dos campos do menu e não ele totalmente.
       
      Segue o código:

      .menu{width: 100%;height: 50px;background-color: #fff; margin-top: -65px; }
      .menu ul{list-style: none;position: relative;float: right;}
      .menu ul li {width: 200px;float: left;}
      #menu2 {width: 130px;float: left;}
      #menu3 {width: 160px;float: left;}
      .menu ul li:last-child {width: 200px;float: left;}
      .menu i {vertical-align: middle; margin-right: 2px; margin-top: -4px;}
      .menu a{padding: 15px;display: block;text-decoration: none;text-align: center;background-color: #fff;color: #151e51; vertical-align: middle;  font-size: 16px;}
      .menu ul ul{position: absolute; margin-left: 50px; visibility: hidden; } /*Atacando a ul do submenu, escondendo os campos */
      .menu ul li:hover ul{visibility: visible;  }/*Atacando a ul do submenu, passando pela li interna, mostrando os campos ocultos*/
      .menu a:hover{background-color: #fff; font-weight: 500;}/*Alterando a cor da fonte quando o mouse passa por cima*/
      #primeiro{ border-radius: 7px 7px 0px 0px;}
      #ultimo{ border-radius: 0px 0px 7px 7px;}
      .menu ul ul li{float: none;width: 200px;  }/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li:last-child {float: none; width: 200px;}/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li a {background-color: #f1f1f1;border-radius: 0; text-align: left; margin-bottom: -20px; color: black;} /*Alterando a cor de fundo do submenu*/
      .menu ul ul li a:hover {background-color: #f1f1f1;color: black; } /*Alterando a cor de fundo do submenu*/
      .borda {border-radius: 0;}
      label[for="bt_menu"]{padding: 5px;background-color: #222;color: #fff;font-family: 'Arial';text-align: center;font-size: 30px;cursor: pointer;width: 50px;height: 50px; margin-top: -75px;}
      #bt_menu{display: none;}
      label[for="bt_menu"]{display: none;}
       
      Agora o código da versão mobile
       
      label[for="bt_menu"]{display: block;float: right; margin-top: -70px; background: #f35270;}
          #bt_menu:checked ~ .menu{margin-left: 0;}
          .menu{margin-top: 255px;margin-left: -110%;transition: all .9s;width: 100%; }
          .menu ul{float: none;}
          .menu ul li{width: 100%;float: none;}
          .menu ul li:last-child {width: 100%;float: none; margin-top: 55px;}    
          .menu ul ul{ /*Escondendo os subitens no modo mobile*/
              position: static;overflow: hidden;max-height: 0;transition: all .9s;}
          .menu ul li:hover ul{ /*mostrando os subitens no modo mobile*/
              height: auto;max-height: 900px;}
          .menu ul ul li{width: 100%}
          .menu ul ul li:last-child {width: 100%;}
       
       
    • By vmdev
      Bom dia!
      Eu tô com um probleminha aqui, espero que alguém consiga me ajudar.
      Eu tenho dois elementos: h1 e h2, eu fiz um script para efeito de digitação pra ambos, só que eu quero que o efeito de digitação do h2 seja iniciado somente quando o h1 for terminado, ou, depois de um tempo que eu selecionar. Tentei fazer dessa forma, mas não deu certo:
      <script>                                 function typeWrite (elemento) {                                 const textoArray = elemento.innerHTML.split('');                                 elemento.innerHTML = '';                                 textoArray.forEach((letra, i) => {                                  setTimeout(function() {                                      elemento.innerHTML += letra                                  }, 75 * i)                                                                  });                                                      }                          const titulo = document.querySelector('h1')                          typeWrite(titulo);                          </script>                          <script>                             var segundos = 4;                             setTimeout ( function typeWrite (elemento) {                             const textoArray = elemento.innerHTML.split('');                             elemento.innerHTML = '';                             textoArray.forEach((letra, i) => {                              setTimeout(function() {                                  elemento.innerHTML += letra                              }, 75 * i)                                                          });                                              }, segundos * 1000);                      const titulo2 = document.querySelector('h2')                      typeWrite(titulo2);                      </script>  
       
       Alguém pode ma falar qual é o erro? Obrigado!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.