Brazil default date format does not work on bootstrap

Question

I have this datepicker component of 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>

I put these Avascripts

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

Or this one

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

The fact is, none of them worked. The latter, worse, as it opens another calendar underneath with time option, and it does not close when choosing the date and click off. Without also closes when choosing the date, but when clicking outside the calendar, closes.

How do I change the date format to Portuguese Brasil(dd/MM/yyyy)?

Answer 1

You are using the wrong format. According to documentation of Datepicker:

dd - day of Month (two Digit)

[...]

DD - day name

[...]

mm - Month of year (two Digit)

[...]

MM - Month name long

Therefore, you should be using

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

Answer 2

I made an adjustment in your code, I believe that now is working the date box, as you did not mention I used the latest stable version of frameworks

I did not simulate for the datetimepicker(), I believe that now it should run only with 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>

Answer 3

Try to put this without changing anything, if it meets your needs, you will adapt in your use.

<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>

If you want to know more have this link on github explaining Datapicker