彈出日期選擇器鎖定在彈出對話框後面

我的日期選擇器對話框鎖定在彈出對話框後面。我的對話框包含一個帶有日期字段的表單。當我點擊選擇一個日期時，日期選擇器就會出現在對話框的後面。立即關閉對話框，日期選取器對話框也消失了。不知道這一個我可以在這裏使用一些幫助。彈出日期選擇器鎖定在彈出對話框後面

這是我打這個電話，以彈出對話框

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(); 
}

}

最後，這是包含彈出日期形式picker

<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>

來源

2017-03-15 Tee-Jay

您是否有可以發佈的任何代碼，或者可能是plnkr？ –

Errmm是啊，我可能不得不做一些洗牌，把它們拼在一起 –

我已經看過類似的問題在這裏acouple。看來問題是與CSS有關。一些與z-index有關的事情。 beig相當新的角2，只是不知道去戳 –

好的，所以這比我想象的要容易得多。不知道我是否做了正確的事情，但似乎正在工作。

我決定檢查datepicker.scss的內容。我複製並對z-index進行了以下更改，最初只有1000的值。我將「1000」替換爲「9999999！important」。我將這些代碼粘貼到一個單獨的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; 
}

來源

2017-03-15 14:22:48

彈出日期選擇器鎖定在彈出對話框後面

回答

相關問題