Passing options - the right syntax to use

[belgoros]

What is the rignt syntax to use when passing more than one option in the template ?
I tried as follows:

<div class="row">
  {{ember-timepicker class="form-control"
    onChange=(action 'onChange')
    timeFormat='HH:mm'}}
</div>

what should display the time in 24 hours format (18:00, for ex.) as explained in jQuery options docs
But it fails and still displays it as follows:

More over, how to pass more than one option ? Event if I change the format to H:mm, - it changes nothing at all, I still have the same time format applied as in the above screenshot.
I tried the following variants and the compilation failed:

<div class="row">
  {{ember-timepicker class="form-control"
    onChange=(action 'onChange')
    timeFormat='HH:mm'}}
</div>

<div class="row">
  {{ember-timepicker class="form-control"
    onChange=(action 'onChange')
    options=(timeFormat='HH:mm' startTime ='08:00)}}
</div>

<div class="row">
  {{ember-timepicker class="form-control"
    onChange=(action 'onChange')
    options=(timeFormat:'HH:mm', startTime: '08:00)}}
</div>

Thank you

[jamesdixon]

@belgoros as mentioned by another poster in #4, you must pass an options object to the component. See the usage instructions here: https://github.com/scoutforpets/ember-timepicker#usage

[belgoros]

If it worked that way, I wouldn't open this issue. If you really have time, you can take a look at the example app to see the errors:

# when starting the server

 /Users/Serguei/projects/js/ember-timepicker/app/controllers/application.js
   4:3  error  Only string, number, symbol, boolean, null, undefined, and function are allowed as default properties  ember/avoid-leaking-state-in-ember-objects
  10:9  error  Unexpected console statement                                                                           no-console

In the browser there is even no input displayed and here are the errors in the console:

[jamesdixon]

If it worked that way, I wouldn't open this issue.

I understand but if you look at the code, you'll be able to see that it doesn't accept any additional params except for onChange and options.

4:3 error Only string, number, symbol, boolean, null, undefined, and function are allowed as default properties ember/avoid-leaking-state-in-ember-objects
10:9 error Unexpected console statement

This is because you're using console.log(selectedTime) in your onChange action.

As for the other error, I'm not sure what the error is pointing to. I'm using this in my production application with no issues. Can you try with only your onChange action and no options to see if that resolves the error?

[belgoros]

The same errors even if I keep onChange only:

<h2 id="title">Welcome to Ember</h2>
{{ember-timepicker
  onChange=(action 'onChange')
}}
{{outlet}}

Once I remove the add-on input completely, the above errors disappear. Browser console points to ember-timepicker.js lines 9-10:

What is weird is that I had the input displayed in another project with no errors like that. But when creating a fresh newly Ember app, with no other add-ons but the yours, it fails to display whatever :(.

[jamesdixon]

Can you click on the ember-timepicker.js:9 to see where exactly the error is pointing to?

[belgoros]

Sure, here it is:

[jamesdixon]

@belgoros thanks. not sure what the issue is, to be honest. It looks like some sort of transpilation issue or something. If I run into it during my testing, I will let you know.

[belgoros]

OK, thank you for your time 👍