트위터 부트 스트랩 날짜 선택기
Twitter Bootstrap 날짜 선택기를 사용하려면 어떻게해야합니까? 아래 코드를 사용했지만 작동하지 않습니다.
<html>
<head>
<title>DatePicker Demo</title>
<script src="js/jquery-1.7.1.js"></script>
<link href="css/datepicker.less" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/bootstrap-datepicker.js"></script>
</script>
</head>
<body>
<form >
<div class="input">
<input class="small" type="text" value="01/05/2011" data-datepicker="datepicker">
</div>
</form>
</body>
</html>
Twitter Bootstrap은 현재 jQuery UI 스타일과 호환되지 않습니다.
https://github.com/twitter/bootstrap/issues/156
https://github.com/sferik/rails_admin ( http://rails-admin-tb.herokuapp.com/admin/drafts/new )에 도움이 될 수 있습니다.
가장 인기있는 부트 스트랩 날짜 선택기는 현재 다음과 같습니다 : https://github.com/eternicode/bootstrap-datepicker ( 파악 해준 @dentarg 에게 감사드립니다 )
간단한 인스턴스화에는 다음 만 필요합니다.
HTML
<input class="datepicker">
자바 스크립트
$('.datepicker').datepicker();
https://jsfiddle.net/k6qsm5no/1/ 여기에서 간단한 예를 참조 하거나 여기 http://bootstrap-datepicker.readthedocs.org/en/latest/ 전체 문서를 참조하십시오.
대부분의 혼란은 bootstrap-datepicker라는 이름의 주요 라이브러리가 세 개 이상 존재하기 때문에 발생합니다.
- Andrew 'eternicode'Rowls의 인기있는 eyecon 날짜 선택기 포크 (이것을 사용하세요!) :
- Stefan 'eyecon'Petre의 원본 버전, http://www.eyecon.ro/bootstrap-datepicker/ 에서 계속 사용 가능
- 'storborg' 가 부트 스트랩에 병합하려고했던 완전히 관련없는 datepicker 위젯입니다 . 병합되지 않았고 위젯의 적절한 릴리스 버전이 생성되지 않았습니다.
새로운 프로젝트를 시작하는 경우-아니면 도대체, eyecon 버전을 사용하여 이전 프로젝트를 인수하더라도-eyecon이 아닌 eternicode 버전 을 사용 하는 것이 좋습니다 . 원래 아이콘 버전은 기능과 문서면에서 완전히 열등하며 이는 변경되지 않을 것입니다. 2013 년 3 월 이후로 업데이트되지 않았습니다.
데모 페이지 에서 eternicode datepicker의 대부분의 기능을 볼 수 있으며 , 이를 통해 datepicker의 구성을 사용하고 결과를 관찰 할 수 있습니다. 자세한 내용은 간결하지만 포괄적 인 문서를 참조하세요.이 문서 는 한 시간 이내에 전체를 사용할 수 있습니다.
하지만 참을성이없는 경우 datepicker의 가장 간단하고 일반적인 사용 사례에 대한 매우 짧은 단계별 가이드가 있습니다.
빠른 시작 가이드
- 페이지에 다음 라이브러리 ( 여기 에 명시된 최소 버전 )를 포함하세요.
- jQuery
- 부트 스트랩 -JS와 CSS 모두
- 최신 릴리스 버전의 bootstrap-datepicker- JS와 CSS 모두
input페이지 어딘가에 요소를 넣으십시오.<input id="my-date-input">jQuery를 사용하여 입력을 선택하고
.datepicker()메서드를 호출합니다 .jQuery('#my-date-input').datepicker();페이지를로드하고
input요소 를 클릭하거나 탭합니다 . 날짜 선택기가 나타납니다.
Jquery Bootstrap을 확인하십시오.
http://jslegers.github.com/jquery-bootstrap/
I was having the same problem but when I created a test project, to my surprise, datepicker worked perfectly using Bootstrap v2.0.2 and Jquery UI 1.8.11. Here are the scripts i'm including:
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
add
z-index:1151;
to the style sheet in
.datepicker
Create a custom theme with themeroller, then on the download page, choose 'Advanced Theme Settings'. Set the CSS scope to 'body'. Since the CSS rules you download will be prefixed with the body tag selector, they'll have higher specificity and will override bootstrap rules.
I was also facing the same problem for twitter-bootstrap.
As eternicode/bootstrap-datepicker is incompatible with jQuery UI.
But twitter-bootstrap is working fine for vitalets/bootstrap-datepicker even with jQuery UI.
어떤 사람들은 이 bootstrap-datepicker.js 구현 에 대한 링크 를 게시했습니다 . 나는 그것을 다음과 같은 방식으로 사용했으며 Bootstrap 3에서 작동합니다.
이것은 내가 사용한 마크 업입니다.
<div class="input-group date col-md-3" data-date-format="dd-mm-yyyy" data-date="01-01-2014">
<input id="txtHomeLoanStartDate" class="form-control" type="text" readonly="" value="01-01-2014" size="14" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"</span>
</span>
</div>
이것은 자바 스크립트입니다.
$('.date').datepicker();
위의 링크에서 다운로드 한 자바 스크립트 파일과 CSS 파일도 포함 시켰습니다. 물론 col-md-3필요에 맞게 부트 스트랩 그리드 클래스를 제거 해야합니다.
당신은 data-datepicker="datepicker"그것을 사용해야합니다date-provide="datepicker"
또한 2 개의 부트 스트랩 스타일 시트를 포함 bootstrap.css하고bootstrap.min.css
또한 사용하는 것이 bootstrap-datepicker3.min.css보다datepicker.less
전체 Html :
<html>
<head>
<title>DatePicker Demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-datepicker3.min.css">
<script src="js/jquery-1.7.1.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
</head>
<body>
<form>
<div class="input">
<input data-provide="datepicker" class="small" type="text" value="01/05/2011">
</div>
</form>
</body>
</html>
참조 URL : https://stackoverflow.com/questions/8267858/twitter-bootstrap-date-picker
'Programing' 카테고리의 다른 글
| asp.net mvc 3 및 C #을 사용하여 쿠키를 지우는 방법은 무엇입니까? (0) | 2021.01.11 |
|---|---|
| 프로그래밍 방식으로 새 키 저장소를 생성하려면 어떻게합니까? (0) | 2021.01.11 |
| 쉘 스크립트 (Unix)에서 터미널 창을 닫으시겠습니까? (0) | 2021.01.11 |
| StaticExtension 값을 확인할 수 없습니다. (0) | 2021.01.11 |
| 오류 : Phonegap에서 화이트리스트 거부 (0) | 2021.01.11 |