web/src/app/send/efflux-dates.component.html

<div class="row" [formGroup]="datesForm">
    <div class="col-md-6 mt-4 mt-md-0 form-group">
        <label for="deletionDate">{{'deletionDate' | i18n}}</label>
        <ng-template #deletionDateCustom>
            <ng-container [ngSwitch]="browserPath">
                <ng-container *ngSwitchCase="'firefox'">
                    <div class="d-flex justify-content-around">
                        <input id="deletionDateCustomFallback" class="form-control mt-1" type="date"
                            name="DeletionDateFallback" formControlName="fallbackDeletionDate" required
                            placeholder="MM/DD/YYYY" [readOnly]="disableSend" data-date-format="mm/dd/yyyy">
                        <input id="deletionTimeCustomFallback" class="form-control mt-1 ml-1" type="time"
                            name="DeletionTimeDate" formControlName="fallbackDeletionTime" required
                            placeholder="HH:MM AM/PM" [readOnly]="disableSend">
                    </div>
                </ng-container>
                <ng-container *ngSwitchCase="'safari'">
                    <div class="d-flex justify-content-around">
                        <input id="deletionDateCustomFallback" class="form-control mt-1" type="date"
                            name="DeletionDateFallback" formControlName="fallbackDeletionDate" required
                            placeholder="MM/DD/YYYY" [readOnly]="disableSend" data-date-format="mm/dd/yyyy">
                        <select id="deletionTimeCustomFallback" class="form-control mt-1 ml-1" [required]="!editMode"
                            formControlName="fallbackDeletionTime" name="SafariDeletionTime">
                            <option *ngFor="let o of safariDeletionTimePresetOptions" [ngValue]="o.twentyFourHour">{{o.twelveHour}}</option>
                        </select>
                    </div>
                </ng-container>
                <ng-container *ngSwitchDefault>
                    <input id="deletionDateCustom" class="form-control mt-1" type="datetime-local"
                        name="DeletionDate" formControlName="defaultDeletionDateTime" required
                        placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disabled">
                </ng-container>
            </ng-container>
        </ng-template>
        <div *ngIf="!editMode">
            <select id="deletionDate" name="SelectedDeletionDatePreset"
                formControlName="selectedDeletionDatePreset" class="form-control" required>
                <option *ngFor="let o of deletionDatePresets" [ngValue]="o.value">{{o.name}}
                </option>
            </select>
            <ng-container *ngIf="selectedDeletionDatePreset.value === 0">
                <ng-container *ngTemplateOutlet="deletionDateCustom">
                </ng-container>
            </ng-container>
        </div>
        <div *ngIf="editMode">
            <ng-container *ngTemplateOutlet="deletionDateCustom">
            </ng-container>
        </div>
        <div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
    </div>
    <div class="col-md-6 mt-4 mt-md-0 form-group">
        <div class="d-flex">
            <label for="expirationDate">{{'expirationDate' | i18n}}</label>
            <a href="#" appStopClick (click)="clearExpiration()" class="ml-auto"
                *ngIf="editMode && !disabled">
                {{'clear' | i18n}}
            </a>
        </div>
        <ng-template #expirationDateCustom>
            <ng-container [ngSwitch]="browserPath">
                <div *ngSwitchCase="'firefox'" class="d-flex justify-content-around">
                    <input id="expirationDateCustomFallback" class="form-control mt-1" type="date"
                        name="ExpirationDateFallback" formControlName="fallbackExpirationDate" [required]="!editMode"
                        placeholder="MM/DD/YYYY" [readOnly]="disabled" data-date-format="mm/dd/yyyy">
                    <input id="expirationTimeCustomFallback" class="form-control mt-1 ml-1" type="time"
                        name="ExpirationTimeFallback" formControlName="fallbackExpirationTime" [required]="!editMode"
                        placeholder="HH:MM AM/PM" [readOnly]="disabled">
                </div>
                <!-- non-default cases are not showing up -->
                <div *ngSwitchCase="'safari'" class="d-flex justify-content-around">
                    <input id="expirationDateCustomFallback" class="form-control mt-1" type="date"
                        name="ExpirationDateFallback" formControlName="fallbackExpirationDate" [required]="!editMode"
                        placeholder="MM/DD/YYYY" [readOnly]="disabled" data-date-format="mm/dd/yyyy">
                    <select id="expirationTimeCustomFallback" class="form-control mt-1 ml-1" [required]="!editMode"
                        formControlName="fallbackExpirationTime" name="SafariExpirationTime">
                        <option *ngFor="let o of safariExpirationTimePresetOptions" [ngValue]="o.twentyFourHour">{{o.twelveHour}}</option>
                    </select>
                </div>
                <ng-container *ngSwitchDefault>
                    <input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
                        name="ExpirationDate" formControlName="defaultExpirationDateTime" placeholder="MM/DD/YYYY HH:MM AM/PM" 
                        [readOnly]="disabled">
                </ng-container>
            </ng-container>
        </ng-template>
        <div *ngIf="!editMode">
            <select id="expirationDate" name="SelectedExpirationDatePreset"
                formControlName="selectedExpirationDatePreset" class="form-control" required>
                <option *ngFor="let o of expirationDatePresets" [ngValue]="o.value">{{o.name}}
                </option>
            </select>
            <ng-container *ngIf="selectedExpirationDatePreset.value === 0">
                <ng-container *ngTemplateOutlet="expirationDateCustom">
                </ng-container>
            </ng-container>
        </div>
        <div *ngIf="editMode">
            <ng-container *ngTemplateOutlet="expirationDateCustom">
            </ng-container>
        </div>
        <div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
    </div>
</div>