Jquery Datepicker不能用於Bootstrap 3

我已經在輸入字段中嵌入了jquery datepicker，但它沒有顯示它。但是，當我擦除jQuery的cdn鏈接並嵌入datepicker cdn然後它工作正常，但我也有一個模式，但模式不工作，如果我抹掉bootstrap cdn爲jquery並將datepicker cdn jquery。只有當有特定的cdn時，它們中的任何一個才能工作。Jquery Datepicker不能用於Bootstrap 3

這是自舉jQuery的CDN代碼

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

這是默認的CDN代碼。現在，當我點擊我的模式，然後它會打開

，但是當我插入

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

現在的模式工作，但日期選取器無法正常工作，但是當我抹去bootsrap CDN那麼日期選擇器工作正常，但隨後再次，該模式不工作，因爲缺少引導jQuery的CDN。

這是日期選擇器代碼：

<input type="text" id="datepicker" placeholder="DD/MM/YYYY"> 
$(function(){ 
    $('#datepicker').datepicker({ 
     inline: true, 
     //nextText: '&rarr;', 
     //prevText: '&larr;', 
     showOtherMonths: true, 
     //dateFormat: 'dd MM yy', 
     dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 
     //showOn: "button", 
     //buttonImage: "img/calendar-blue.png", 
     //buttonImageOnly: true, 
    }); 
});

來源

2015-04-17 Mohamed

爲什麼不使用html5 input type =「date」 – Grumpy

您確定您正確使用'jQuery'和'jQuery UI'嗎？你爲什麼使用CDN作爲jQuery核心？既可以使用CDN（不推薦），也可以在項目中使用CDN，並確保相應地引用它。您的代碼有效：http://jsfiddle.net/jz1emsd0/ – urbz

@Grumpy''它僅適用於Chrome http://caniuse.com/#search=date – oscarvady

Jquery的UI v 1.8.18將不會與jQuery 1.9或更高的工作

引導3（因爲jquery.browser在jQuery的1.9棄用）將需要最低限度。 jQuery的1.9.1

至於解決方法，你需要包括jQuery的與jquery-migrate

Link to sample

HTML

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.8.18/themes/smoothness/jquery-ui.css"/> 
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/> 

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
<script src="https://code.jquery.com/jquery-migrate-1.2.1.js"></script> 
<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 


<input type="text" id="datepicker" placeholder="DD/MM/YYYY"/> 

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div>

的JavaScript

$(function() { 
    $('#datepicker').datepicker({ 
     inline: true, 
     //nextText: '→', 
     //prevText: '←', 
     showOtherMonths: true, 
     //dateFormat: 'dd MM yy', 
     dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 
     //showOn: "button", 
     //buttonImage: "img/calendar-blue.png", 
     //buttonImageOnly: true, 
    }); 
});

實際上，你可能會得到更多的兼容性問題jQuery用戶界面和引導 - 考慮使用jquery-ui-bootstrap。

來源

2015-04-17 11:15:42 Artem

謝謝阿爾喬姆。真的是索爾布。：豎起大拇指 – Mohamed

Jquery Datepicker不能用於Bootstrap 3

回答

相關問題