pip-webui/pip-webui-controls/src/date_range/date_range.html

HTML5 UI for LOB applications

<!--
@file Date range control content
@copyright Digital Living Software Corp. 2014-2016
-->

<div class="pip-date-range layout-row flex" tabindex="-1">
    <md-input-container ng-show="isDay()" class="tm0 pip-day flex"
            ng-class="{'flex-fixed' : $mdMedia('gt-xs')}">
        <md-select class="select-day w-stretch"
                   ng-class="{'pip-no-line' : pipNoLine}"
                   ng-disable="{{disableControls}}"
                   md-on-open="onDayClick()"
                   ng-model="day"
                   ng-change="onDayChanged()"
                   placeholder="{{dayLabel}}"
                   aria-label="DAY">

            <md-option ng-value="opt" ng-repeat="opt in days track by opt ">
               {{nameDays[$index]}} {{ opt }}
            </md-option>
        </md-select>
    </md-input-container>
    <md-input-container ng-show="isWeek()" class="tm0 flex"
                        ng-class="{'flex-fixed' : $mdMedia('gt-xs')}">
        <md-select class="select-week w-stretch"
                   ng-class="{'pip-no-line' : pipNoLine}"
                   ng-disable="{{disableControls}}"
                   ng-model="week"
                   ng-change="onWeekChange()"
                   placeholder="{{weekLabel}}"
                   aria-label="WEEK">

            <md-option ng-value="opt.id" ng-repeat="opt in weeks track by opt.id">
                {{ opt.name }}
            </md-option>
        </md-select>
    </md-input-container >
    <div class="flex-fixed"
         ng-class="{'w16': $mdMedia('gt-xs'), 'w8':  $mdMedia('xs')}"
         ng-show="isDay() || isWeek()">
    </div>
    <md-input-container ng-show="isMonth() && !monthFormatShort " class="tm0 flex min-w72"
                        ng-class="{'flex-fixed' : $mdMedia('gt-xs')}">
        <md-select class="select-month w-stretch"
                   ng-class="{'pip-no-line' : pipNoLine}"
                   ng-disable="{{disableControls}}"
                   md-on-open="onMonthClick()"
                   ng-model="month"
                   ng-change="onMonthChanged()"
                   placeholder="{{monthLabel}}"
                   aria-label="MONTH">

            <md-option ng-value="opt.id" ng-repeat="opt in months track by opt.id">
                {{ opt.name }}
            </md-option>
        </md-select>
    </md-input-container>
    <md-input-container ng-show="isMonth() && monthFormatShort" class="flex tm0"
                        ng-class="{'flex-fixed' : $mdMedia('gt-xs')}">
        <md-select class="select-month w-stretch"
                   ng-class="{'pip-no-line' : pipNoLine}"
                   ng-disable="{{disableControls}}"
                   md-on-open="onMonthClick()"
                   ng-model="month"
                   ng-change="onMonthChanged()"
                   placeholder="{{monthLabel}}"
                   aria-label="MONTH">

            <md-option ng-value="opt.id" ng-repeat="opt in shortMonths track by opt.id">
                {{ opt.name }}
            </md-option>
        </md-select>
    </md-input-container>
    <div class="flex-fixed"
         ng-class="{'w16': $mdMedia('gt-xs'), 'w8':  $mdMedia('xs')}"
         ng-show="isMonth()">
    </div>
    <md-input-container class="tm0 flex"
                        ng-class="{'flex-fixed' : $mdMedia('gt-xs')}">
        <md-select class="select-year w-stretch"
                   ng-class="{'pip-no-line' : pipNoLine}"
                   ng-disable="{{disableControls}}"
                   md-on-open="onYearClick()"
                   ng-model="year"
                   ng-change="onYearChanged()"
                   placeholder="{{yearLabel}}"
                   aria-label="YEAR">

            <md-option ng-value="opt" ng-repeat="opt in years track by opt">
                {{ opt }}
            </md-option>
        </md-select>
    </md-input-container>
</div>