Microsoft Edge에서 Bootstrap Datepicker를 사용하는 방법

Question

Edge와 함께 특별히 Bootstrap Datepicker에 문제가 있습니다. Chrome, Firefox 및 Internet Explorer 버전 11은 예상대로 작동하지만 Edge는 정말 이상하고 바람직하지 않은 작업을하고 있습니다.

jQuery UI datepicker를 사용했지만 어떤 성공도 거두지 않았으므로 부트 스트랩으로 롤백했습니다. Bootstrap datepicker를 Edge와 함께 사용할 수있는 방법이 있습니까? 아니면, 또 다른 datepicker 기법이 효과가 있습니까? 해커가 필요하지 않은게 정말로 필요합니다.

@Html.EditorFor(model => model.DateCreditEarned, 
       new { htmlAttributes = new { @class = "form-control" } }) 

을하고보기의 맨 아래에 내가 가진 :

(AN MVC 웹 프로젝트) 내 면도기보기에서

내가 가진이 작업 날짜 선택기의 스크린 샷이다

@section styles {   
<link href="~/Content/bootstrap-datepicker3.css" rel="stylesheet" /> 
} 

@section scripts { 
<script src="~/Scripts/bootstrap-datepicker.js"></script> 
    <script> 
     $(document).ready(function() { 
      $("#DateCreditEarned").datepicker(); 
     }); 
    </script> 
} 

Chrome에서 의도 한대로. Firefox 및 IE 버전 11도 예상대로 작동합니다.

이

예상 또는 원하는대로 작동하지 않는 가장자리에있는 날짜 선택기의 스크린 샷이다. 시각적으로보기가 좋지 않을뿐 아니라 날짜 값 중 하나를 클릭해도 아무런 작업도 실행되지 않습니다.

다시 시도해 보니 부트 스트랩 날짜 표시기가 몇 초 동안 나타나고 Screenshot에서 보는 것과 겹치는 것을 보았습니다. Edge가 자체 datepicker에서 빠져 나가는 것처럼 보입니다.

Answer 1

문제는 에지가 date 타입 입력에 대한 기본 스타일과 선택을 가지고 있다는 것입니다. 이 기본 스타일은 플러그인을 통해 수행 된 추가 스타일링보다 우선합니다. 비교이 ​​하나 "날짜"유형없이 :

$('#DateCreditEarned').datepicker();

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css"> 
 
<script src="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script> 
 

 
<input id="DateCreditEarned" class="form-control" />

대 "날짜"유형을 사용 이 하나

$('#DateCreditEarned').datepicker();

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css"> 
 
<script src="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script> 
 

 
<input id="DateCreditEarned" type="date" class="form-control" />

을

이 문제를 해결하려면 입력 유형을 "text"과 같은 것으로 설정하십시오. 그렇게하면 모든 컨트롤과 스타일은 Edge가 아닌 플러그인에 의해 처리됩니다.

당신은과 면도기에서이 작업을 수행 할 수 있습니다 : [. 나에게 잘 보이는]

@Html.EditorFor(model => model.DateCreditEarned, new { 
    htmlAttributes = new { @type = "text", @class = "form-control" } 
})