Timepicker not working (v15.1.3)

[tsuzukayama]

Timepicker is not binding the correct values to the input, following error happens on init:

core.es5.js:1020 ERROR TypeError: picker_2.set is not a function at materialize-directive.js:192

[feisel]

In what Browser occuried this error?

[tsuzukayama]

I'm using Chrome 60.0.3112.78 64-bits

[feisel]

Do you have an example code?

[bitbeter]

  <div class="input-field col s4">
       <p for="first_name">startTime</p>
       <input
            class="timepicker"
            materialize="pickatime"
            [(ngModel)]="newTimeSheet.startTime"
            [materializeParams]="timePickerParams"
        />
    </div>

[tsuzukayama]

<input id="horarioFim" name="horarioFim" [(ngModel)]="evento.horarioFim" formControlName="horarioFim" materialize="pickatime" [materializeActions]="timeActions" [materializeParams]="[timeParams]" type="text" />

[WillNye]

What version of materialize are you using?

[feisel]

ok i analysed the bug. I checked the current implementation in angular2-materialize. Based on tha a created a codepen.

https://codepen.io/anon/pen/BdLbEJ

Same behaviour.

ok i looked after Materializecss.

Materializecss changed the internal timepicker. Old one is based on pickadate.js. New one is based on clockPicker v0.0.7 (http://weareoutman.github.io/clockpicker/) (see release notes https://github.com/Dogfalo/materialize/releases/tag/v0.99.0 )

I saw that #331 pushed support for pickatime. But i think that the api of Materializecss of pickatime changed completed ( see above)

@luketn do you tested #331 against Materializecss v0.99.0 @rubyboy what do you think?

[WillNye]

@feisel I'm a little sleep deprived so I'm not sure I understand. Pickatime support requires 0.99.0+ but I made a note of that in #331 PR notes and in the commit. The OP's error seems to indicate the function is missing so I'm not sure they're running the correct version of materialize.

[feisel]

@WillNye see my codepen code. Its vanilla materializecss 0.99.0.

I think you cant set value with datepicker.set('select',value)

[WillNye]

@feisel What browser are you using? I admittedly only tested on Chrome and Firefox but I'm able to set value with your code pen. I've been setting the value with formcontrol and defining a placeholder to prevent formatting issues when setting the input on init without issue.

[feisel]

@WillNye I tested with chrome. Can you create a codepen with running code, please?

[WillNye]

@feisel
That's the weird part, I used your exact codepen example and it worked. Did you try running incognito? Maybe you have a cached version of materialize? I can't think of another reason why this would be happening. I even tested on Ubuntu and Windows.

FWIW I'm running: Version 59.0.3071.115 (Official Build) (64-bit) of Chrome Version 54.0 (64-bit) of Firefox With OS of Windows 10 and Ubuntu 16.04

[feisel]

@WillNye Im sorry, same situation in chrome v60 and firefox. Can someone else check my codepen?

[tsuzukayama]

The timepicker opens up, and sets the correct time, but the error still appears on the console TypeError: timepicker.set is not a function

Running Manjaro (Arch Linux) with Firefox 54.01 (64 bits)

[feisel]

@tsuzukayama thats the point. Timepicher opens and set the corret time, but error in console that was exactle the same problem what do you reported @tsuzukayama

core.es5.js:1020 ERROR TypeError: picker_2.set is not a function at materialize-directive.js:192

[WillNye]

@tsuzukayama @feisel

This...is not a proud day. It had worked on my local build so I didn't have the common sense to check the console.

It looks like replacing this

       if (this.ngModel) {
            picker.set('select', this.ngModel);
        } else {
             picker.set('select', jqueryPickerElement.val());
        }

With this

       if (this.ngModel) {
            picker.val(this.ngModel);
        } else {
            picker.val(jqueryPickerElement.val());
        }

Resolves the error

[rubyboy]

@WillNye does it mean we need to change the code in materialize-directive.ts to the one you provided above?

[WillNye]

@rubyboy Sorry for the late response, I hadn't been feeling well. It would mean updating the way picker's value is set.

[rubyboy]

@WillNye thanks for that. We've updated the code and released a fix version, which is now the latest one on NPM. @tsuzukayama are you able to confirm it's all working as expected and we can close this issue?

[tsuzukayama]

Ok, sorry for the delay, busy days. Just tested the timepicker, and the error is gone. Thanks, everyone! Gonna close the issue now.