Loading date in (Materialize) Pickadate issue: picker is undefined

help
1

Hi

I’m getting “picker is undefined” when trying to load a saved date in materialize pickadate inside a form.

I’m developing over Windows 10 with Meteor 1.4.2.6 and MaterializeCSS 0.9.8

My code:

// Professionals.js
Professionals.schema = new SimpleSchema({
name: {
    label: 'Name',
    type: String,
  },
  birthdate: {
    label: 'Birthdate',
    type: Date,
    optional: true,
  },
});

// profile.html
<template name="profile">
 <div class="card-panel">
  <div class="row">
	<form id="professionalForm" class="col s12">
	  <div class="row">
		<div class="input-field col s4">
		  <input id="name" type="text" class="validate" value="{{professional.name}}">
		  <label for="name">Name</label>
		</div>
		<div class="input-field col s4">
		  <input id="birthdate" type="date" class="datepicker" value="{{professional.birthdate}}">
		  <label for="birthdate">Birthdate</label>
		</div>
		<button class="btn waves-effect waves-light right" type="submit" name="action">Save</button>
	  </div>
	</form>
  </div>
</div>
</template>

// profile.js
import { Professionals } from '../../../api/professionals/professionals.js';
import { Meteor } from 'meteor/meteor';

import './profile.html';

Template.profile.onCreated(function profileOnCreated() {
  Meteor.call('getProfessionalEmail', function(error, result) {
    if (error) {
      console.log('Error in getProfessionalEmail method: ' + error);
    } else {
      Session.set('currentProfessionalEmail', result);
    }
  });
});

Template.profile.onRendered(function () {
  
  Materialize.updateTextFields();

  $('.datepicker').pickadate({
    format: 'dd/mm/yyyy',
    formatSubmit: 'yyyy/mm/dd',
    hiddenSuffix: '_birthdate',
    firstDay: true,
    selectMonths: true,
    selectYears: 10,

	// ############  SPANISH TRANSLATION INI  ############
    // The title label to use for the month nav buttons
    labelMonthNext: 'Mes siguiente',
    labelMonthPrev: 'Mes anterior',

    // The title label to use for the dropdown selectors
    labelMonthSelect: 'Selecciona un mes',
    labelYearSelect: 'Selecciona un año',

    // Months and weekdays
    monthsFull: [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre' ],
    monthsShort: [ 'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic' ],
    weekdaysFull: [ 'Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado' ],
    weekdaysShort: [ 'Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab' ],

    // Materialize modified
    weekdaysLetter: [ 'D', 'L', 'M', 'X', 'J', 'V', 'S' ],

    // Today and clear
    today: 'Hoy',
    clear: 'Limpiar',
    close: 'Cerrar',
	// ############  SPANISH TRANSLATION END  ############
	
    onSet: function( arg ){
        if ( 'select' in arg ){
            this.close();
        } 
    }
  });
});

Template.profile.helpers({
  professional: function() {
    let currentProfessional = Professionals.findOne({ email: Session.get('currentProfessionalEmail') });
	
    var $input = $('.datepicker').pickadate();
    picker = $input.pickadate('picker');
    console.log('picker: ' + picker.get()); // <-- picker in undefined :(
    //picker.set('select', currentProfessional.birthdate, { format: 'dd/mm/yyyy' });
    
    return currentProfessional;
  },
});

The “name” field is loaded correctly but i’m getting the error with the birthdate…
What am I doing wrong? Any help will be appreciated.

3

picker = $input.pickadate(‘picker’); points to a non-existing element