2014-03-01 3 views
8

Jquery 플러그인 Bootstrap Datepicker을 사용합니다. 그것은 파이어 폭스에서 잘 작동합니다. 또한 Google 크롬의 내 사이트 일부 페이지 (버전 33.0.1750.117 m)에서 작동합니다. 그러나 하나의 텍스트 입력 (name = "TravelDate")이 있는데이 플러그인은 작동하지 않습니다. 이 텍스트 입력은 부트 스트랩 모달 창에 배치됩니다.부트 스트랩 Datepicker가 크롬에서 작동하지 않습니다.

<script> 
$(function() { 
    $("#date-trip").datepicker({ 
     format: "dd.mm.yyyy", 
     startDate: new Date(), 
     todayBtn: "linked", 
     language: "ru", 
     autoclose: true 
    }); 
}); 
</script> 

<!-- Modal --> 
<div class="modal fade" id="createTripModal" tabindex="-1" role="dialog" aria-labelledby="createTripModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Travel creating</h4> 
      </div> 

      @using (Html.BeginForm("Create", "Trip", new {ReturnUrl = ViewBag.ReturnUrl}, FormMethod.Post, new {@class = "form-horizontal", role = "form"})) 
      { 
       @Html.AntiForgeryToken() 

       @Html.ValidationSummary(true) 
       <div class="modal-body"> 
        <label for="date-trip">Date:</label> 
        <input name="TravelDate" type="text" id="date-trip" class="form-control" required autofocus /> 
       </div> 
       <div class="modal-footer"> 
        <input type="submit" value="Create" class="btn btn-primary" /> 
       </div> 
      } 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

Google 크롬에는 콘솔에 오류가 없습니다. 이 플러그인이 다른 양식에서도 올바르게 작동하는 것이 중요합니다.

나는 어떤 조언도 기뻐할 것입니다.

+0

동일한 플러그인 버전 1.6.0을 사용 중이며 Chrome에서 작동하지 않았습니다. 저에게는 jQuery의 구버전이 원인이었습니다. 따라서 아무도이 질문을 발견하고 아래의 답변이 작동하지 않으면 jQuery를 업그레이드하십시오. – Nick

답변

11

버그를 수정했습니다. This post이 도움이되었습니다. 나는 플러그인의 코드에서 줄을 변경 (10 -> 1151) :

var zIndex = parseInt(this.element.parents().filter(function() { 
          return $(this).css('z-index') != 'auto'; 
         }).first().css('z-index'))+1151; 
3

가 크롬에 날짜 선택기를 표시하는 코드에서이 CSS를 사용하십시오

<style>.datepicker{z-index:1200 !important;}</style> 
5

<input type="date"....>를 사용하여 조심 - 최신 버전의 Chrome에는 html5 입력 유형 필드 "날짜"에 대한 자체 날짜 선택 도구가있어 부트 스트랩 3 날짜 표시기를 방해합니다. 대신 <input type="text"....>을 사용하십시오.

관련 문제