Datepicker : 모달의 Datepicker (Z- 인덱스)

Bootstrap Modal에 datepicker를 표시하려고하면이 문제가 발생합니다.Datepicker : 모달의 Datepicker (Z- 인덱스)

나는 datepicker 라이브러리로 bootstrap-datepicker을 사용하고 있습니다. 여기

<div class="form-group"> 
    <label for="message-text" class="control-label">Start Date</label> 
      <div class="input-group date"> 
       <div class="input-group-addon"> 
        <i class="fa fa-calendar"></i> 
       </div> 
       <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> 
      </div> 
</div>

그리고 내 날짜 선택기 스크립트입니다 : : 이미 zIndexOffset을 사용하지만 작동하지 않습니다

$('#datepicker2').datepicker({ 
     autoclose: true, 
     format: 'yyyy-mm-dd', 
     zIndexOffset: 10000 
    });

, 달력은 여전히 모달 뒤에 표시가

여기 내 모달 형태이다.

누구든지 해결책을 제안 할 수 있습니까?

감사합니다.

출처

2016-06-19 Code On

당신이 모달 내부의 날짜 선택기를 추가,'container'를 옵션을 사용하여 시도 해 봤나 (클래스 모달 오픈 신체에 추가) 할 때

.modal-open .ui-datepicker{z-index: 2000!important}

이 옵션 이 적용되었습니다? – visola

@visola 아직, 컨테이너 옵션은 어디에 두어야합니까? –

이것은 옵션입니다. https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#container – visola

당신은 모달 div 내부의 날짜 선택 컨테이너를 추가하는 시도해야해야한다.

<div class="form-group" id="myModalWithDatePicker"> 
    <label for="start_date" class="control-label">Start Date</label> 
    <div class="input-group date"> 
    <div class="input-group-addon"> 
     <i class="fa fa-calendar"></i> 
    </div> 
    <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> 
    </div> 
</div>

그런 다음 당신은 다음처럼 container 옵션을 사용할 수 있습니다 :

$('#datepicker2').datepicker({ 
    autoclose: true, 
    container: '#myModalWithDatePicker', 
    format: 'yyyy-mm-dd' 
});

출처

2016-06-19 11:16:50 visola

컨테이너에 넣었지만 여전히 작동하지 않습니다. –

@CodeOn , 요소를 올바른 위치에 놓고 있는지 확인하기 위해 DOM을 검사 할 수 있습니까? 날짜 선택 도구가 모달 안에 표시되지 않는 다른 이유는 없습니다. 나는 우리가 더 많은 세부 사항을 필요로한다고 생각한다. 이 문제를 재현하는 jsfiddle을 만들 수 있다면 많은 도움이 될 것입니다. – visola

여기 내 피들입니다. https://jsfiddle.net/88q5eacb/ 모달 미안하지만 내 서버에서 작동합니다. –

이 문제를 야기하는 경우 나도 몰라,하지만 당신은 속성 = ""에 대한 레이블의 ID로 설정해야합니다

<label for="message-text" class="control-label">Start Date</label>

입력에 다른 ID에 대한 같은 settingthe 라벨입니다 입력 요소는 그것이 관련이있다 - 그래서

<label for="datepicker2" class="control-label">Start Date</label>

출처

2016-06-19 10:47:23 gavgrif

내가 해결하기 위해이 옵션을 사용하면 모달이 같은 id을 줄 수 있습니다. 모달 개방

출처

2018-02-22 05:13:33

Datepicker : 모달의 Datepicker (Z- 인덱스)

답변

관련 문제