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

回答

相关问题