Default date format brazil does not work in bootstrap

Question

Default date format brazil does not work in bootstrap

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

4

I have this bootstrap datepicker component

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

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

Or this

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

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

How do I change the date format for Brazilian Portuguese (dd / mm / yyyy)?

javascript html jquery twitter-bootstrap

asked by anonymous 01.04.2016 / 13:15

3 answers

Schedule task linux (Cron) Boot application with Windows

score 1 · Answer 1

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

dd - day of month (two digit)

[...]

DD - day name

[...]

mm - month of year (two digit)

[...]

MM - month name long

So you should be using

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

score 0 · Answer 2

Try to put this one without changing anything, if it meets your needs, you will adapt in its 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'd like to learn more, this link in github explaining Datapicker

score 0 · Answer 3

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

I did not simulate for datetimepicker() , because I think I should now only run 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><scriptsrc="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><scriptsrc="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>