Bootstrap 3과 함께 작동하도록 bootstrap-datepicker를 얻으려면 어떻게해야합니까?

Bootstrap 3과 함께 작동하도록 bootstrap-datepicker를 얻으려면 어떻게해야합니까?

---

나는 eternicode (Andrew Rowls)에서 유지 관리하는 bootstrap-datepicker 버전을 사용합니다 .

Bootstrap 2에서는 작동했지만 이제는 Bootstrap 3 라이브러리에서 작동하지 않습니다.

bootstrap-datepicker 를 어떻게 사용할 수 Bootstrap 3있습니까?

참고 : 저장소가 eternicode 에서 조직 계정 (uxsolutions)으로 이동되었습니다.

---

또한 Stefan Petre의 http://www.eyecon.ro/bootstrap-datepicker를 사용 하며 수정 없이는 Bootstrap 3에서 작동하지 않습니다. 참고 것을 http://eternicode.github.io/bootstrap-datepicker/ 스테판 페 트레의 코드의 포크입니다.

Bootstrap 3에서 새 CSS 및 양식 그리드 레이아웃을 사용하려면 마크 업을 변경해야합니다 (샘플 마크 업은 작동하지 않음). 또한 실제 bootstrap-datepicker 구현에서 일부 CSS 및 JavaScript를 수정해야합니다.

내 해결책은 다음과 같습니다.

<div class="form-group row">
  <div class="col-xs-8">
    <label class="control-label">My Label</label>
    <div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
      <input class="form-control" type="text" readonly="" value="12-02-2012">
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
  </div>
</div>

176-177 행의 datepicker.css에서 CSS 변경 :

.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {

34 행의 datepicker-bootstrap.js의 자바 스크립트 변경 :

this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false;

최신 정보

http://eternicode.github.io/bootstrap-datepicker/ 의 최신 코드를 사용하면 변경 사항은 다음과 같습니다.

446-447 행의 datepicker.css에서 CSS 변경 :

.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {

46 행의 datepicker-bootstrap.js의 Javascript 변경 :

 this.component = this.element.is('.date') ? this.element.find('.input-group-addon, .btn') : false;

마지막으로, 날짜 선택기를 활성화하는 JavaScript (일부 옵션 포함) :

 $(".input-group.date").datepicker({ autoclose: true, todayHighlight: true });

Bootstrap 3.0 및 JQuery 1.9.1로 테스트되었습니다. 이 포크는 기능이 더 풍부하고 현지화를 지원하며 컨트롤 위치 및 창 크기에 따라 날짜 선택기를 자동으로 배치하여 이전 버전의 문제였던 선택기가 화면에서 사라지는 것을 방지하므로 다른 포크보다 사용하는 것이 더 좋습니다. 버전.

---

이것에 부딪히는 다른 사람을 위해 ...

이 플러그인의 버전 1.2.0 (이 게시물 현재)은 Bootstrap 3.0으로 문서화 된 것처럼 모든 경우에서 작동하지 않지만 사소한 해결 방법이 있습니다.

특히 아이콘이있는 입력을 사용하는 경우 HTML 마크 업은 물론 클래스 이름이 변경됨에 따라 약간 다릅니다.

<div class="input-group" data-datepicker="true">
    <input name="date" type="text" class="form-control" />
    <span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>

이 때문에 부모 컨테이너 가 아닌 입력 요소 자체를 직접 가리키는 선택기를 사용해야하는 것 같습니다 (데모 페이지에서 자동 생성 된 HTML이 제안하는 것입니다).

$('*[data-datepicker="true"] input[type="text"]').datepicker({
    todayBtn: true,
    orientation: "top left",
    autoclose: true,
    todayHighlight: true
});

Having done this you will probably also want to add a listener for clicking/tapping on the icon so it sets focus on the text input when clicked (which is the behaviour when using this plugin with TB 2.x by default).

$(document).on('touch click', '*[data-datepicker="true"] .input-group-addon', function(e){
    $('input[type="text"]', $(this).parent()).focus();
});

NB: I just use a data-datepicker boolean attribute because the class name 'datepicker' is reserved by the plugin and I already use 'date' for styling elements.

참고URL : https://stackoverflow.com/questions/18887950/how-do-i-get-bootstrap-datepicker-to-work-with-bootstrap-3