Conditionally change the root element in AngularJS directive's template

Question

I'm writing a directive which needs to have a different root element, based on a mode attribute I'm passing into directive. Below is an expected template file:

Template file:

<div ng-if="mode === 'full'">
    <div>
        ...
    </div>
    <input (a lot of attributes...)
           class="datepicker" />
</div>

<input ng-if="mode === 'short'"
       (a lot of attributes...)
       class="datepicker" />

But of course AngularJS complains that you must have a single root element in a template.

I know I could just split them into 2 files and load conditionally inside templateUrl (that is templateUrl: function(tElem, tAttrs) { if tAttrs.mode === 'full' ...).

But in my situation <input class="datepicker" /> is an element with lots of different attributes, which are the same in both full and short modes. Ideally I'd put the input in a separate directive, but I feel it'd be an overkill in my case. Then keeping both outcomes in 2 different templates, would result in decoupling shared information (input attributes) into 2 separate files. Anyone changing anything on input in short mode would need to remember to make the same change on input in full mode, which would reside in different file.

Question: How can I handle such situation inside a single template file?

Notice: I really can't add a single wrapping element (e.g. <div>) in this case. This would violate the layout I have.