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

HTML5 UI for LOB applications

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

<div class="event-edit layout-row layout-xs-column flex layout-align-start-start">
    <div flex="47" class="w-stretch rm24-flex0">
        <p class="text-caption text-grey tm0">{{startLabel}}</p>

        <div class="layout-row layout-align-space-between-center">
            <div class="rm16 pip-datepicker-container" flex="49">
                <md-datepicker ng-model="data.startDate"
                               xmd-placeholder="{{startLabel}}"
                               ng-change="onChangeStartDate()"
                               ng-disabled="isDisabled()"
                               aria-label="START-DATE">
                </md-datepicker>
            </div>
            <div flex>
                <md-input-container class="w-stretch tm0">
                    <md-select aria-label="START-TIME" class="tm0 bm0" ng-model="data.startTime" ng-disabled="isDisabled()"
                               ng-change="onChangeStartTime()">
                        <md-option ng-value="opt.id" ng-repeat="opt in intervalTimeCollection track by opt.id">{{ opt.time }}
                        </md-option>
                    </md-select>
                </md-input-container>
            </div>
        </div>
    </div>
    <div flex="47" class="w-stretch">
        <p class="text-caption text-grey tm0">{{endLabel}}</p>

        <div class="layout-row layout-align-space-between-center">
            <div class="rm16 pip-datepicker-container flex-49">
                <md-datepicker ng-model="data.endDate"
                               xmd-placeholder="{{endLabel}}"
                               ng-disabled="isDisabled()"
                               ng-change="onChangeEndDate()"
                               aria-label="END-DATE">
                </md-datepicker>
            </div>
            <div flex>
                <md-input-container class="w-stretch tm0">
                    <md-select aria-label="END-TIME" class="tm0 bm0" ng-model="data.endTime" ng-change="onChangeEndTime()"
                               ng-disabled="isDisabled()">
                        <md-option ng-value="opt.id" ng-repeat="opt in intervalTimeCollection track by opt.id">{{
                            opt.time }}
                        </md-option>
                    </md-select>
                </md-input-container>
            </div>
        </div>
    </div>
</div>