Using Wickedpicker in Aurelia

Question

I want to use Wickedpicker in Aurelia. I added the following codes in HTML file:

<require from="wickedpicker"></require>
<input type="text"  name="timepicker" class="timepicker"/>
...

And in View-Model I have this code:

import "wickedpicker"
.
.
constructor(){
let options = {
      now: "12:35", //hh:mm 24 hour format only, defaults to current time
      twentyFour: false,  //Display 24 hour format, defaults to false
      upArrow: 'wickedpicker__controls__control-up',  //The up arrow class selector to use, for custom CSS
      downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS
      close: 'wickedpicker__close', //The close class selector to use, for custom CSS
      hoverState: 'hover-state', //The hover state class to use, for custom CSS
      title: 'Timepicker', //The Wickedpicker's title,
      showSeconds: false, //Whether or not to show seconds,
      timeSeparator: ' : ', // The string to put in between hours and minutes (and seconds)
      secondsInterval: 1, //Change interval for seconds, defaults to 1,
      minutesInterval: 1, //Change interval for minutes, defaults to 1
      beforeShow: null, //A function to be called before the Wickedpicker is shown
      afterShow: null, //A function to be called after the Wickedpicker is closed/hidden
      show: null, //A function to be called when the Wickedpicker is shown
      clearable: false, //Make the picker's input clearable (has clickable "x")
    };
    let timepicker = $('.timepicker').wickedpicker(options);

I installed wickedpicker via jspm (jspm install npm:wickedpicker) and when I click on input box there is no effect and no error. Could you please help me?

Answer 1

Don't do it in view model's constructor. Define this in attached() method instead. attached() is called when the view is attached to DOM. At that moment you will have all elements in the DOM. When you call it from the constructor, the view is not yet initialized, hence jQuery cannot find .timepicker element.

class ViewModel {
  attached() {
    let options = { ... };
    $('.timepicker').wickedpicker(options);
  }

  detached() {
    // ...
  }
}

There's also detached() method that you should use to clean up (destroy the plugin instance). However, it doesn't seem that Wickedpicker has the destroy support.

More info on Aurelia's view model lifecycle can be found in Dwayne Charrington's post.

Few more tips:

• Once you make it work, encapsulate it to a custom attribute or a custom element. It's always a good idea not to work with DOM in regular view models.
• Use ref to name elements in the view and use them from within view model. I.e. <input ref="timepicker"... and then in view model you can use $(this.timepicker).... More info can be found in another SO question.