Materialize: Cannot set initial value of Timepicker following pickadate.js documentation

Created on 3 Oct 2017  路  6Comments  路  Source: Dogfalo/materialize

Expected Behavior

Following pickadate.js API documentation, we should be able to initialize the timepicker with a selected value like this:

// Using arrays formatted as [HOUR,MINUTE].
picker.set('select', [3,0])
````

## Current Behavior
When trying to use `set()` method on the `picker` using Materialize CSS I get the following error:

Uncaught TypeError: picker.set is not a function
````

Possible Solution

After taking a look at the original pickadate.js library, I noticed they do have the set method (of course) declared here picker.time.js.

When I look in to Materialize picker.time.js file included with Materialize, the set method is not declared.

Steps to Reproduce (for bugs)

See Plunkr for demonstration (open console to see the error)

Context

Having a method to initialize the input value is pretty essential :)
Is there any plan to include more fonctionnality or update picker.time.js in Materialize repository?
Am I missing something?

Your Environment

  • Version used: 0.100.2
  • Browser Name and version: Chrome 61.0.3163.100
  • Operating System and version (desktop or mobile): Windows 10
  • Link to your project (if appropriate): Plunkr

Most helpful comment

I just realized that the timerPicker is not based in the PickaDateJs, but in the ClockPicker; as seeing in: materialize/js/date_picker/picker.time.js:

/*!
* ClockPicker v0.0.7 (http://weareoutman.github.io/clockpicker/)
* Copyright 2014 Wang Shenwei.
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
*
* Further modified
* Copyright 2015 Ching Yaw Hao.
*/

All 6 comments

Happening the same here:
angular.min.js:122 TypeError: timePicker.pickadate.set is not a function at eventInfoCtrl.vm.onUpdateEvent (eventinfo.controller.js:176)

I just realized that the timerPicker is not based in the PickaDateJs, but in the ClockPicker; as seeing in: materialize/js/date_picker/picker.time.js:

/*!
* ClockPicker v0.0.7 (http://weareoutman.github.io/clockpicker/)
* Copyright 2014 Wang Shenwei.
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
*
* Further modified
* Copyright 2015 Ching Yaw Hao.
*/

Thanks @wendellpereira, I've got mislead by the pickatime() initialization.

So basically, I guess we have to initialize the time picker with pickatime() but use ClockPicker for JQuery to set the value and communicate with the API...

It seems to work with my updated Plunker.

Would be great to add some documentation on that matter (only mentioning it in the demo page as it is mentioned for the Datepicker would do the trick).

Exactly this.

Timepicker is not based off pickatime, this will be made clear in the documentation updates coming with 1.0

Thanks we figured it out.
I guess I should probably remove my PR then if it is already documented in 1.0 ...

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lpgeiger picture lpgeiger  路  3Comments

ReiiYuki picture ReiiYuki  路  3Comments

djensen47 picture djensen47  路  3Comments

hartwork picture hartwork  路  3Comments

samybob1 picture samybob1  路  3Comments