busy-web/ember-date-time

<div class="menu">
    <a class="button select" {{action 'toggleList'}}>{{selected.name}}</a>

    <span class="arrows">
        <a class="button arrow left{{if disablePrev ' disabled'}}" {{action 'intervalBack'}}><span></span></a>
        <a class="button arrow right{{if disableNext ' disabled'}}" {{action 'intervalForward'}}><span></span></a>
    </span>

    <span class="date">{{selectedDateRange}}</span>
</div>

<ul class="date-range-picker-dropdown list{{if isListOpen ' active'}}">
    {{#each __actionList as |item|}}
        <li class="item{{if item.selected ' active'}}" {{action 'selectItem' item.id}}>{{item.name}}</li>
    {{/each}}

    {{#if allowCustom}}
        <li class="item custom{{if isCustom ' active'}}" {{action 'selectCustom'}}>{{loc "Custom"}}</li>
    {{/if}}

    <li class="date-range-picker-menu picker{{if isCustom ' active'}}{{if allowCustom '' ' disable-custom'}}">
        <div class="header">
            <span class="state start{{if isStart ' open'}}">
                {{private/date-input timestamp=_start max=stateManager.maxDate min=stateManager.minDate format=format name=inputDataName
                    onclick=(action 'setFocus' 'start')
                    onfocus=(action 'setFocus' 'start')
                    ontabkey=(action 'tabAction')
                    onchange=(action 'dateChange')
                    onsubmit=(action 'applyRange')}}
            </span>

            <span>{{busy-loc "to"}}</span>

            <span class="state end{{if isStart '' ' open'}}">
                {{private/date-input timestamp=_end max=stateManager.maxDate min=stateManager.minDate format=format name=inputDataName
                    onclick=(action 'setFocus' 'end')
                    onfocus=(action 'setFocus' 'end')
                    ontabkey=(action 'tabAction')
                    onchange=(action 'dateChange')
                    onsubmit=(action 'applyRange')}}
            </span>
        </div>

        <div class="body">
            {{private/date-picker stateManager=stateManager onUpdate=(action 'calendarChange')}}
        </div>

        <div class="footer">
            <a class="button blue" {{action 'applyRange'}}>{{busy-loc "Apply"}}</a>
            <a class="button text" {{action 'cancelRange'}}>{{busy-loc "Cancel"}}</a>
        </div>
    </li>
</ul>