【发布时间】：2017-03-15 01:09:17
【问题描述】：
我的日期选择器对话框被锁定在我的弹出对话框后面。我的对话框包含一个带有日期字段的表单。当我单击以选择日期时，日期选择器位于对话框后面。我立即关闭对话框，日期选择器对话框也消失了。想不通这个 我可以在这里使用一些帮助。
这是我调用弹出对话框的地方
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>
【问题讨论】：
-
你有任何可以发布的代码，或者是 plnkr 吗？
-
Errmm 是的，我可能需要重新洗牌才能将它们拼凑在一起
-
我在这里查看了几个类似的问题。看来问题与css有关。与z-index有关。 Beig 对 Angular 2 很陌生，只是不确定会去戳
-
是的，这听起来绝对像是 z-index 问题。 （我猜你在 angular 2 材质日期选择器上使用早期版本？）由于使用了 CSS 封装，你最好的选择可能是在你的 style.css 中添加一个小补丁来解决问题，直到更稳定日期选择器的版本已发布，但无法查看/重现该问题，我无法确定补丁将/应该是什么。
-
@SteveG。刚刚用一些代码对原始问题进行了一些更新。希望它有助于解决我的问题
标签： angular