How to set up PickaDate do Materialize correctly?

Question

How to set up PickaDate do Materialize correctly?

Navigation

#1 by (1 votes)

0

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

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

HTML code:

<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 I inserted 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',
});

Test code: link

jquery materialize

asked by anonymous 23.05.2017 / 14:00

1 answer

Generate random numbers in java, store in a vector and sort them How to send a parcelable from an object with list?

score 1 · Accepted Answer

Regarding the language of datepicker , it is only overwriting the initialization settings. The fact of automatically opening found a solution by customizing the close method by taking the focus from 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><scriptsrc="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>

If you'd like datepicker to close with just 1 click, you can also add the following snippet:

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