Use custom CSS classes

[Serguei Cambour]

If I'm not mistaken, there is no way to pass in CSS class option to {{input-time}} tag, right ? Whatever I tried, it does take it into account, the only way I see is to use in-line style tag.

[Loz Jackson]

Have you tried adding the class directly in the template.. something like

{{input-time class="custom-css-classname"}}

That should add the css class to the input-time component. However, that component is simply a wrapper for the time-picker and time-field components, which may be where you really want the classes added... if so you may be able to target those components by using something like this in your style sheet

.input-time .tt-time-picker {
  ...
}

Hope that helps, let me know if you have any other Qs.. and if there is anything that can be done to make this easier then I'm all ears.. (again PRs welcome)

[Serguei Cambour]

OK, thank you, I'll take a try (either one or another solution you posted). I'll close the issue.

[Serguei Cambour]

Using a custom CSS as you suggested didn't solve the problem:

It looks as if the input-time input textfield is inside another one. Here the code I used:

<div class="form-row">
        <div class="form-group col-sm-4">
          {{input-time
            placeholder="Select a time"
            value=time
            displayFormat='HH:mm'
            pickerDisplayFormat='hh:mm'
            scrollToSelectedTime=false
            class="form-control"
          }}
        </div>
      </div>

[Loz Jackson]

The input element is wrapped inside a d containing div element. The structure looks something like this:

<div class="input-time">

  <input class="tt-time-field">
  
  <div class="...">
    <div class="tt-time-picker">
       ...
    </div>
  </div>
</div>

input-time is a (div) container, tt-time-field is the input element. tt-time-picker is the time picker component

So, to target the input text field you could do something like .input-time tt-time-field.

The problem is that container div. What you want to do is add the form-control class to the input, and the form-group class to the container div.

So we can either modify this addon to pass in a classname to the text-field component.. ...or you can import/extend/copy the input-time component in your app and modify it to pass in a class name to the input element.

[Serguei Cambour]

Thank you for your response. I think the most flexible solution (at least for the future use) would be to enable to pass in a CSS class like ember-power-select does, for example. Otherwise, the look of the above input is really not very nice and would be limited for use.

[Loz Jackson]

You could extend the time-field component to add your class like this:

import TimeFieldComponent from 'ember-time-tools/components/tt-time-field';

export default TimeFieldComponent.extend({

  classNames: ['form-control']
});

Then any time you use {{input-time}} in your app it will have the form-control class added. Thats is the easiest way to customise the class applied to the input element.. and can be done today without updating the addon.

If that doesn't work for you then let me know what the API you think would work and I'll see if I can implement something.