0
日付選択ダイアログがポップアップダイアログの後ろにロックされています。私のダイアログボックスには、日付フィールドを含むフォームが含まれています。日付をクリックして選択すると、日付ピッカーがダイアログボックスの後ろに表示されます。直ちに、日付選択ダイアログも消えたダイアログボックスを閉じます。この1つを理解してください 私はここでいくつかの助けを使用することができます。ポップアップダイアログがポップアップダイアログの後ろにロックされています
私はポップアップダイアログ
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はありますか？ –
えええええええええええええええええええ、私はそれらを一緒にまとめるためにいくつかの改造をしなければならないかもしれません。 –
私はここで同様の問題のカプールを見ました。問題はCSSに関連しているようです。 z-indexと何か関係があります。 Beigは2番の角度に全く新しく、ちょうど突っ込んで行くことは確実ではない –