edit_booking_dialog.tmpl.html

<md-dialog ng-attr-aria-label="{{ ariaLabel }}">
    <form ng-cloak="ng-cloak"
          ng-submit="answer(value)">
        <md-toolbar class="md-secondary">
            <div class="md-toolbar-tools">
                <md-button class="md-icon-button"
                           ng-click="close()">
                    <md-icon md-svg-src="static/icons/close.svg"
                             aria-label="Close dialog"></md-icon>
                </md-button>
                <span flex="flex"></span>
                <md-button type="submit"
                           class="md-button">
                    {{ 'SAVE' | translate }}
                </md-button>
            </div>
        </md-toolbar>
        <md-dialog-content>
            <div layout="row"
                 flex="flex">
                <md-input-container flex="100">
                    <label>
                        {{ 'LABEL_BOOKING_DATE' | translate }}
                    </label>
                    <md-datepicker name="dateField"
                                   ng-model="date"
                                   ng-required="true"
                                   md-current-view="month">
                    </md-datepicker>
                    <div ng-messages="dateField.$error">
                        <div ng-message="valid">{{ 'INVALID_DATE' | translate }}</div>
                        <div ng-message="required">{{ 'REQUIRED_DATE' | translate }}</div>
                    </div>
                </md-input-container>
            </div>
            <div layout="row"
                 flex="flex">
                <md-input-container class="my-input-container"
                                    flex="100">
                    <label>
                        {{ 'LABEL_BOOKING_TIME' | translate }}
                        ({{ 'FORMAT_TIME' | translate}})
                    </label>
                    <md-button class="md-icon-button"
                               ng-click="focusTime()">
                        <md-icon md-svg-icon="static/icons/schedule_gry.svg"
                                 class="s48"
                                 aria-hidden="true"></md-icon>
                    </md-button>
                    <input name="timeField"
                           ng-model="time"
                           type="time"
                           focus-me="timeFocused"
                           required="required"
                           timevalid="timevalid" />
                    <div>
                        <div class="md-errors-spacer"></div>
                    </div>
                    <div ng-messages="timeField.$error">
                        <div ng-message="valid">{{ 'INVALID_TIME' | translate }}</div>
                        <div ng-message="required">{{ 'REQUIRED_TIME' | translate }}</div>
                    </div>
                </md-input-container>
            </div>
            <div layout="row"
                 flex="flex">
                <md-input-container class="md-icon-float my-input-container"
                                    flex="100">
                    <label>
                        {{ 'LABEL_BOOKING_TYPE' | translate }}
                    </label>
                    <md-button class="md-icon-button"
                               ng-click="focusType()">
                        <md-icon md-svg-icon="static/icons/nature_gry.svg"
                                 aria-hidden="true"></md-icon>
                    </md-button>
                    <md-select name="typeField"
                               ng-model="type"
                               focus-me="typeFocused"
                               required="required">
                        <md-option ng-repeat="type in availableTypes"
                                   ng-value="type.value">
                            {{ type.html }}
                        </md-option>
                    </md-select>
                    <div>
                        <div class="md-errors-spacer"></div>
                    </div>
                    <div ng-messages="manualBookingForm.typeField.$error">
                        <div ng-message="valid">{{ 'INVALID_TYPE' | translate }}</div>
                        <div ng-message="required">{{ 'REQUIRED_TYPE' | translate }}</div>
                    </div>
                </md-input-container>
            </div>
        </md-dialog-content>
    </form>
</md-dialog>