我的日期选择器对话框在我的弹出对话框后面被锁定。我的对话框包含一个带有日期字段的表单。当我单击选择日期时，日期选择器会在对话框后面。我立即关闭对话框，日期选择器对话框也消失了。不能弄清楚这个 我可以在这里使用一些帮助。
这是我调用弹出对话框的地方
editEducationOfficeStaffDetails(staffID: string) {
this.dialogService.addDialog(EditEducationOfficeStaffComponent, { ID: staffID, title: "Edit: " + staffID });
}
这是弹出对话框组件
export class EditEducationOfficeStaffComponent extends DialogComponent<PromptModel, EducationOfficeStaff> implements PromptModel, OnInit {
ID: string;
title: string;
editStaff: EducationOfficeStaff;
Date: Date;
constructor(dialogService: DialogService,
private notificationService: NotificationService,
private staffService: StaffService) {
super(dialogService);
}
ngOnInit() {
this.GetEducationOfficeStaff(this.ID);
}
GetEducationOfficeStaff(staffID: string) {
//this.myname = staffID;
this.staffService.GetNewEducationOfficeStaff(staffID)
.subscribe((res: EducationOfficeStaff) => {
this.editStaff = res;
})
}
apply() {
//this.result = this.message;
this.close();
}
isRequired = false;
isDisabled = false;
isOpenOnFocus = false;
isOpen = false;
type: string = 'date';
types: Array<any> = [
{ text: 'Date', value: 'date' },
{ text: 'Time', value: 'time' },
{ text: 'Date Time', value: 'datetime' }];
date: Date = null;
minDate: Date = null;
maxDate: Date = null;
openDatepicker() {
this.isOpen = true;
setTimeout(() => {
this.isOpen = false;
}, 1000);
}
setDate() {
this.date = new Date();
}
}
最后，这是包含弹出日期选择器的表单
<div class="modal-body">
<form *ngIf="editStaff" class="form-horizontal" (ngSubmit)="AddNewEducationOfficeStaff()" #editOfficeStaffForm="ngForm" style="margin-left:10px;margin-top:30px;margin-bottom:20px;margin-right:30px">
<fieldset>
<!--<legend>Enter Country Details</legend>-->
<!--<div class="row" style="padding-left:10px;padding-bottom:10px">
<img md-card-md-image class="image" style="margin-bottom:10px;margin-left:20px" />
<input class="btn btn-primary" #staffPic type="file" (change)="changeListner($event)" style="margin-left:20px" />
</div>-->
<div class="row">
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput name="staffID" placeholder="Click Here To Enter Staff ID"
[(ngModel)]="editStaff.StaffID" required id="staffID" style="width: 100%"
#staffID="ngModel">
<div [hidden]="staffID.valid || staffID.pristine"
class="alert alert-danger">
Staff is required
</div>
</md-input-container>
</div>
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput placeholder="Click Here To First Name"
[(ngModel)]="editStaff.FirstName" name="firstName" id="firstname" required style="width: 100%"
#firstName="ngModel">
<div [hidden]="firstName.valid || firstName.pristine"
class="alert alert-danger">
First Name is required
</div>
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput placeholder="Click Here To Enter Last Name"
[(ngModel)]="editStaff.LastName" name="lastname" required id="lastname" style="width: 100%"
#lastname="ngModel">
<div [hidden]="lastname.valid || lastname.pristine"
class="alert alert-danger">
Last Name is required
</div>
</md-input-container>
</div>
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput placeholder="Click Here To Enter Email Address"
[(ngModel)]="editStaff.Email" name="email" id="email" required style="width: 100%"
#email="ngModel">
<div [hidden]="email.valid || email.pristine"
class="alert alert-danger">
Email Address is required
</div>
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput name="position" placeholder="Click Here To Enter Position"
[(ngModel)]="editStaff.Position" required id="position" style="width: 100%"
#position="ngModel">
<div [hidden]="position.valid || position.pristine"
class="alert alert-danger">
Position is required
</div>
</md-input-container>
</div>
<div class="col-md-6">
<!--<md-checkbox *ngFor="let role of roles" class="example-margin"
name="role.Name"
(change)="roleSelected(role)"
[align]="align"
[(ngModel)]="role.selected">
{{role.Name}}
</md-checkbox>-->
</div>
</div>
<div class="row">
<div class="col-md-6">
<md2-datepicker placeholder="Select Date"
name="DOB"
[(ngModel)]="date"
[required]="isRequired"
[disabled]="isDisabled"
[openOnFocus]="isOpenOnFocus"
[isOpen]="isOpen"
[type]="type"
[min]="minDate"
[max]="maxDate"
#dateControl="ngModel"
ngDefaultControl>
</md2-datepicker>
<!--<div class="input-group date">
<md-input-container style="width:100%">
<input mdInput placeholder="Click Here To Enter Date Of Birth"
[(ngModel)]="dateValue" name="DOB" id="DOB" required
value="{{date | date:'MM/dd/yy'}}" (click)="open()"
#DOB="ngModel">
</md-input-container>
<span class="input-group-addon " style="cursor:pointer" (click)="open()">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>-->
<!--<div class="dp-popup" *ngIf="showDatepicker">
<datepicker [(ngModel)]="dt" [minDate]="minDate" name="DOB" [showWeeks]="false" (selectionDone)="onSelectionDone($event)"></datepicker>
<div class="clearfix">
<div class="pull-left">
<button type="button" class="btn btn-sm btn-primary" (click)="today()">Today</button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-sm btn-danger" (click)="clear()">Clear</button>
</div>
</div>
</div>-->
</div>
<div class="col-md-6">
<!--<div class="input-group date">
<md-input-container style="width:100%">
<input mdInput placeholder="Click Here To Enter Employment Start Date"
[(ngModel)]="startDateValue" name="startDate" id="startDate" required
value="{{date | date:'MM/dd/yy'}}" (click)="startDateOpen()"
#startDate="ngModel">
</md-input-container>
<span class="input-group-addon " style="cursor:pointer" (click)="startDateOpen()">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
<div class="dp-popup" *ngIf="showStartDatepicker">
<datepicker [(ngModel)]="sdt" [minDate]="minDate" name="startDate" [showWeeks]="false" (selectionDone)="startDateOnSelectionDone($event)"></datepicker>
<div class="clearfix">
<div class="pull-left">
<button type="button" class="btn btn-sm btn-primary" (click)="startDateToday()">Today</button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-sm btn-danger" (click)="startDateclear()">Clear</button>
</div>
</div>
</div>-->
</div>
</div>
<div class="row">
<!--<div class="col-md-6">
<md-select placeholder="Select Office" style="width:100%"
id="administructureID" name="administructureID" class="dropdown"
(ngModelChange)="onOfficeSelect($event)"
[(ngModel)]="educationOfficeStaff.AdministructureID">
<md-option *ngFor="let struct of structs" [value]="struct.AdministrativeStructureID">
{{ struct.AdminStructName }}
</md-option>
</md-select>
</div>-->
<div class="col-md-6">
<md-radio-group [(ngModel)]="Gender"
(change)="GenderSelected($event.value)" name="genderOption" class="example-margin"
[value]="editStaff.Gender"
[align]="isAlignEnd ? 'end' : 'start'">
<md-radio-button name="genderOption" value="Male">
Male
</md-radio-button>
<md-radio-button name="genderOption" value="Female">
Female
</md-radio-button>
</md-radio-group>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p></p>
<button md-raised-button color="primary" (click)="editOfficeStaffForm.reset()">Cancel</button>
</div>
<div class="col-md-6">
<p></p>
<button md-raised-button color="primary" (click)="UpdateEducationOfficeStaff();editOfficeStaffForm.reset()" [disabled]="!editOfficeStaffForm.form.valid || !editOfficeStaffForm.form.dirty">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
答案 0 :(得分：1)
好的，所以这比我想象的要容易得多。不确定我是否做了正确的事情，但它似乎正在发挥作用。
我决定查看datepicker.scss的内容。我复制并对z-index进行了以下更改，最初的值只有1000.我更换了＆＃34; 1000＆＃34;与＆＃34; 9999999！important＆＃34;。我将此代码粘贴到单独的css文件中
.cdk-overlay-container {
position: fixed;
z-index: 999999 !important;
}
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 9999999 !important;
}
.cdk-overlay-pane {
position: absolute;
pointer-events: auto;
box-sizing: border-box;
z-index: 9999999 !important;
}
.cdk-overlay-backdrop {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999999 !important;
pointer-events: auto;
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
opacity: 0;
}