0

Eu configurei o pickadate do Materialize numa página só que ele está ficando em inglês e quando eu saio e volto pra aba que tem o pickadate ele abre sem eu clicar no campo.

Inseri o materialize.min.css no cabeçalho e o jquery-2.1.1.min.js e materialize.min.js no fim da página.

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>

Depois da importação dos arquivos `javascript no fim da página inseri esse código:

$('.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',
});

Código para teste: https://jsfiddle.net/Ly52g027/

3
  • Consegues criar um jsFiddle ou montar o código na pergunta que reproduza o problema? Estás a usar algum router?
    – Sergio
    Commented 23/05/2017 às 12:01
  • Criei o Fiddle. Quando o foco tá no campo e eu saio e volto ele abre o pickdate automaticamente. Está em inglês e ignorando o padrão de formato que informei. Commented 23/05/2017 às 12:08
  • 1
    Percebi que esse comportamento de abrir o datepicker automaticamente ao sair e voltar na aba acontece mesmo no site do materializecss
    – Marco
    Commented 23/05/2017 às 18:43

1 Resposta 1

1

Em relação a idioma do datepicker, é somente sobrescrever as definições de inicialização. O fato de abrir automaticamente encontrei uma solução customizando o método close tirando o foco do campo:

$('.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>

Caso queira que o datepicker feche com apenas 1 clique, pode adicionar também o seguinte trecho:

onSet: function( arg ){
    if ( 'select' in arg ){ //prevent closing on selecting month/year
        this.close();
    }
}
3
  • Funcionou perfeitamente. Eu não tinha colocado o $(document).ready(function() { talvez seja por isso que não estivesse funcionando a formatação da data. Commented 23/05/2017 às 19:33
  • @WendelRodrigues, na vdd não, pois o snippet já executa os códigos quando o DOM está carregado, eu coloquei por força do hábito mesmo rs
    – Marco
    Commented 23/05/2017 às 19:35
  • O problema foram os pontos que apontei na resposta mesmo
    – Marco
    Commented 23/05/2017 às 19:36

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 .