4

Tenho esse componente datepicker do bootstrap

<div class="col-md-2">
  <input id="dataSolicitacao" type="text" name="timepicker" class="b-datepicker form-control form-white" placeholder="Informe a data" data-orientation="top">
</div>

Coloquei esses javascripts

<script>
  $(document).ready(function () {
    $('#dataSolicitacao').datepicker({
        format: "DD/MM/yyyy",
        language: "pt-BR",
        minViewMode: 0;
        orientation: auto
    });
  });
</script>

Ou esse

<script type="text/javascript">
  $(function() {
    $('#dataSolicitacao').datetimepicker({
      language: 'pt-BR'
    });
  });
</script>

O fato é que nenhum deles funcionou. Esse último, pior, pois ele abre outro calendário por baixo com opção de hora, e ele não fecha ao escolher a data e clicar fora. Sem também não fecha ao escolher a data, mas ao clicar fora do calendário, fecha.

Como altero o formato de data para o português Brasil(dd/MM/yyyy)?

1
  • pq não utilizar o Datepicker do JQuery UI? jqueryui.com/datepicker . Lá existe uma option que define a região da data.
    – Matheus
    20/05/2016 às 18:18

3 Respostas 3

1

Você está usando o formato errado. Segundo a documentação do Datepicker:

dd - day of month (two digit)

[...]

DD - day name

[...]

mm - month of year (two digit)

[...]

MM - month name long

Portanto, você deveria estar usando

  $(document).ready(function () {
    $('#dataSolicitacao').datepicker({
        format: "dd/mm/yyyy",
        language: "pt-BR",
        minViewMode: 0;
        orientation: auto
    });
  });
1
  • Pablo, essa abordagem eu já tentei e não funciona. A data continua no padrão EUA.
    – pnet
    1/04/2016 às 12:03
0

Tente colocar esse sem alterar nada, caso atenda suas necessidades, você vai adaptando no seu uso.

<div class="well">
<div id="datetimepicker1" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
<span class="add-on">
  <i data-time-icon="icon-time" data-date-icon="icon-calendar">
  </i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker({
  language: 'pt-BR'
});
});
</script>

Caso queira saber mais tem esse link na github explicando o Datapicker

7
0

fiz um ajuste no seu código, acredito que agora está funcionando a caixa de data, como vc não mencionou utilizei a ultima versão estável dos frameworks

não simulei para o datetimepicker(), pq acredito que agora deva rodar só com datepicker().

$(document).ready(function () {
  /* treixo do seu código 
  $('#dataSolicitacao').datepicker({
    format: "DD/MM/yyyy",
    language: "pt-BR",
    minViewMode: 0;
    orientation: auto
  });
  
  Observe que o variável 'minViewMode' termina com ';' isso quebra a leitura do JS e
  a variável 'orientation' é uma string então precisa das aspas, ex. 'auto'
  
  */
  
  $('#dataSolicitacao').datepicker({
    format: "dd/mm/yyyy", // modifique para o formato que deseja, utilizei o seu formato colado no ex.
    language: "pt-BR"
    // removi o minViewMode: 0; pq o valor 0 é o padrão
    // removi o orientation: auto, pq o valor 'auto' é o padrão
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/locales/bootstrap-datepicker.pt-BR.min.js"></script>

<div class="container">
  
  <!-- treixo do seu código -->
  <div class="col-md-2">
    <input id="dataSolicitacao" type="text" name="timepicker" class="b-datepicker form-control form-white" placeholder="Informe a data" data-orientation="top">
  </div>
  
  
</div>

1
  • Muito bom, mas para facilitar a usabilidade teria como o datepicker fechar quando escolhesse uma data? 12/01/2017 às 11:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .