Bootstrap Datepicker移动冲突

时间:2018-03-14 08:27:57

标签: jquery twitter-bootstrap datepicker

我正在使用Bootstrap datepicker在Chrome中工作正常但是当我尝试在iPhone上选择日期时,标准jquery datepicker显示而不是Bootstrap Datepicker。如何在iPhone上显示引导日期选择器? 我在关于使用noConflict(下面的代码)的文档中读到了,但我不确定如何在我的代码中实现它。

$('#start').datepicker({
  format: "dd/mm/yyyy",
    todayBtn: true,
    orientation: "bottom auto",
    calendarWeeks: true,
    autoclose: true,
    todayHighlight: true,
    toggleActive: true
 });

如何使用noConflict()?

var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
$.fn.bootstrapDP = datepicker;                 // give $().bootstrapDP the bootstrap-datepicker functionality

1 个答案:

答案 0 :(得分:1)



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css" />
	<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

</head>
<body>
	jquery ui
<input type="text" class="dp-jqueryui">
	<br>
	boostrap
	<input type="text" class="dp-bootstrap">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	
	
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

	<script>
		
		$(function(){
			if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {
    var datepicker = $.fn.datepicker.noConflict();
    $.fn.bootstrapDP = datepicker;
  }
				$('.dp-jqueryui').datepicker();
				$('.dp-bootstrap').bootstrapDP();
			
		});
	</script>
</body>
</html>
&#13;
&#13;
&#13;