How to insert the datepicker value of an icone html <i> into the input using Vue.js?

Asked

Viewed 153 times

1

I’m new here Xp.

How to insert the datepicker value of an html icone into the input using javascript?

I’m using the datepicker of matelialize version 0.100.2 and Vue.js, already fixed the Bug of current versions of Google Chrome, if I put the datepicker class within the input tag works perfectly, but I need it to receive from the icon to leave the input field digitable.

inserir a descrição da imagem aqui

                  <div class="col s6 m4 l4">
                    <div class="input-field">
                      <i class="material-icons datepicker prefix" style="cursor:pointer;" id="dataAdmis"  ref="dataAdmis" name="dataAdmis" @click="insereValornoInput()" >date_range</i>                              
                      <input placeholder="Data de admissão *" id="dataAdmis2" v-mask="'##/##/####'" v-model="dataAdmissaoFunc" type="text" required="true" />
                      <span class="helper-text" data-error="" ></span>
                    </div>  
                  </div>

I will make available here the code to fix the Google Chrome version bug, for those who need, or want to test.

$(document).ready(function(){
  $('.datepicker').on('mousedown .datepicker', (e) => { 
    e.preventDefault (); 
  }), 
  $('.datepicker').on('mousedown .select-dropdown', (e) => { 
    e.preventDefault (); 
  }), 
  $('.datepicker').on('change select', (e) => { 
  $ ('select'). material_select (); 
  }), 

  $('.datepicker').pickadate({
        months: ['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'],
        weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sabádo'],
        weekdaysShort: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sabádo'],
        weekdaysLetter: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
        today: 'Hoje',
        clear: 'Limpar',
        cancel: 'Sair',
        close: 'Ok',
        labelMonthNext: 'Próximo mês',
        labelMonthPrev: 'Mês anterior',
        labelMonthSelect: 'Selecione um mês',
        labelYearSelect: 'Selecione um ano',
        closeOnSelect: true, 
        selectMonths: true,
        selectYears: 65,
        format: 'dd/mm/yyyy',
        container: 'header', 

  })
})
javascript input materialize datepicker

  • You want to take the value of an attribute that’s on the icon and put it inside the input when the guy clicks on the icon is that? Since this attribute value of the icon you want comes dynamically from somewhere?

  • that’s right, after clicking the icon opens a datepicker, then when selecting the date the value is set in the input field

1 answer

1

This problem happens only in this version of materialize (0.100.2) it is not only with datepicker, select also does not load the event '@change', after a day searching and testing I found a solution, I will post here if someone has the same difficulty. follow: 

mounted(){ 
 this.carregaSelects();

},

methods: {

carregaSelects: function(){    
     var self = this;
    //Aqui ele intercepta o evento @change do select
    $('#naturalidadeUf').change(function() {
      var varURL = $("option:selected", this).val();
      self.naturalidadeUf = varURL;
      self.carregaCidadesComplementos(varURL);
    });
    //Aqui ele altera o valor da variável de acordo com a seleção do datepicker
    $('#dataAdmis').change(function() {
      var varURL =  document.getElementById("dataAdmis").value
      self.dataAdmissaoFunc = varURL;
    });
}

}

Browser other questions tagged javascript input materialize datepicker

You are not signed in. Login or sign up in order to post.