How to configure the Materialize Pickadate correctly?

Question

I set up the pickadate of Materialize on an only page that it is getting in English and when I leave and go back to the tab that has the pickadate it opens without me clicking on the field.

I inserted the materialize.min.css in the header and the jquery-2.1.1.min.js and materialize.min.js at the bottom of the page.

Còdigo HTML:

<div class="input-field col s6">
  <input name="dataIni" type="text" class="dataIniFim">
  <label for="dataIni">Data Inicial</label>
</div>
<div class="input-field col s6">
  <input name="dataFim" type="text" class="dataIniFim">
  <label for="dataFim">Data Final</label>
</div>

After importing the javascript files at the bottom of the page insert this code:

$('.dataIniFim').pickadate({
  selectMonths: true, // Creates a dropdown to control month
  selectYears: 15, // Creates a dropdown of 15 years to control year
  dateFormat: 'dd/MM/yy',
});

Code for testing: https://jsfiddle.net/Ly52g027/

Answer 1

In relation to the language of datepicker, is just overwrite the startup settings. By automatically opening I found a solution customizing the method close taking the focus off the field:

$('.dataIniFim').pickadate({
  selectMonths: true,
  selectYears: 15,
  // Título dos botões de navegação
  labelMonthNext: 'Próximo Mês',
  labelMonthPrev: 'Mês Anterior',
  // Título dos seletores de mês e ano
  labelMonthSelect: 'Selecione o Mês',
  labelYearSelect: 'Selecione o Ano',
  // Meses e dias da semana
  monthsFull: ['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'],
  weekdaysFull: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
  weekdaysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
  // Letras da semana
  weekdaysLetter: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
  //Botões
  today: 'Hoje',
  clear: 'Limpar',
  close: 'Fechar',
  // Formato da data que aparece no input
  format: 'dd/mm/yyyy',
  onClose: function() {
    $(document.activeElement).blur()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />
<div class="row">
  <form class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <input name="dataIni" type="text" class="dataIniFim">
        <label for="dataIni">Data Inicial</label>
      </div>
      <div class="input-field col s6">
        <input name="dataFim" type="text" class="dataIniFim">
        <label for="dataFim">Data Final</label>
      </div>
    </div>
  </form>
</div>

Should you want the datepicker close with just 1 click, can also add the following snippet:

onSet: function( arg ){
    if ( 'select' in arg ){ //prevent closing on selecting month/year
        this.close();
    }
}