template causes issues when wrapping the component.

[jackmatt2]

The problem with templates on any basic control is that it renders an unnecessary div tag which screws up other components that wrap the control and also css. In my case, I use a component ember-aupac-control which allows me to add errors, icons etc.

The tempalte:

{{#if hasBlock}}
  {{yield}}
{{else}}
  {{input type="text" class="form-control" disabled=disabled name=textFieldName}}
{{/if}}
{{#unless noIcon}}
<span class="input-group-addon">
  <span class="{{dateIcon}}"></span>
</span>
{{/unless}}

Even if you yield the input control only

{{bs-datetimepicker}}
   <input type="text">
{{/bs-datetimepicker}}

The results is still

<div>
   <input type="text">
</div>

If the control used tagName="input", this would eliminate the issue and as a bonus allow the user to style the tag using class="form-control something-else". This would make dateIcon redundant but then the user can always wrap it themselves. I see that the styling of the control with an icon, error states, messages etc. can be pushed to a separate wrapper component anyway (bootstrap-wrapper) which can be used to style all sorts of controls not just the datepicker.

If you were to use tagName:

{{bs-datetimepicker date=someDate}}

would result in:

<input type="text">

[jasonmit]

Seems like a reasonable request, would be happy to review a PR.

I would suggest though holding off until GlimmerComponent lands.

[jackmatt2]

OK, I will look into it.

[jackmatt2]

@jasonmit do you know that the alternative to tagName will be or is still being thought out?

[lumenlunae]

I had this exact problem with bootstrap and I solved it by doing this:

{{bs-datetimepicker class="bs-datetimepicker" date=model.startTime noIcon=true updateDate=(action (mut model.startTime))}}

.bs-datetimepicker {
  display: table;
}

Hope that helps!