多個jQuery版本在一個頁面

我已使用jQuery 1.10爲datePicker和jQuery 1.9爲TimePicker（來自fgelinas.com）。多個jQuery版本在一個頁面

我用noConflict();但沒有用。這是我的代碼。

<link rel="stylesheet" href="~/Content/Admin/time-picker/include/ui-1.10.0/ui-lightness/jquery-ui-1.10.0.custom.min.css" type="text/css" /> 
<link rel="stylesheet" href="~/Content/Admin/time-picker/jquery.ui.timepicker.css?v=0.3.3" type="text/css" /> 

<script src="~/Content/js/jquery.js"></script> 
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script> 
<script type="text/javascript" src="~/Content/Admin/time-picker/include/jquery-1.9.0.min.js"></script> 
<script type="text/javascript" src="~/Content/Admin/time-picker/include/ui-1.10.0/jquery.ui.core.min.js"></script> 
<script type="text/javascript" src="~/Content/Admin/time-picker/include/ui-1.10.0/jquery.ui.widget.min.js"></script> 
<script type="text/javascript" src="~/Content/Admin/time-picker/include/ui-1.10.0/jquery.ui.tabs.min.js"></script> 
<script type="text/javascript" src="~/Content/Admin/time-picker/include/ui-1.10.0/jquery.ui.position.min.js"></script> 
<script type="text/javascript" src="~/Content/Admin/time-picker/jquery.ui.timepicker.js?v=0.3.3"></script> 

<script> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
    $.noConflict(); 
    $('#datepicker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: "dd-mm-yy", 
     constrainInput: true, 
     yearRange: "1999:2025", 
     onSelect: function() { 
      alert($('#datepicker').val()); 
     } 
    }); 
</script> 

<div> 
    <label for="timepicker.[1]">Default time picker :</label> 
    <input type="text" style="width: 70px;" id="timepicker.[1]" value="" /> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#timepicker\\.\\[1\\]').timepicker({ 
       showAnim: 'blind' 
      }); 
     }); 
    </script> 
</div> 
<div> 
    <input type="text" class="form-control" id="datepicker" /> 
</div>

當我timePicker試圖$.noConflict()，它不會讓使用任何控制。但上面的代碼只是讓我們使用datePicker。當我刪除datePicker腳本時，timePicker完美運行。我必須在一個頁面中使用它們。幫我解決這個問題。謝謝。

來源

2016-04-30 DhavalR

爲什麼你不能只用一個版本？ timepicker/datepicker不存在？ – Rahul

如果你讀了noConflict文檔有以前的jQuery的保存到這樣一個變量的選項： var j = $.noConflict(); 所以要使用可以使用美元符號首先加載jQuery的版本，但如果你需要最後加載，那麼你需要使用j。

在您當前的代碼中，先加載jquery庫1.10，然後調用noConflict，以便美元符號保存1.10 jquery版本。

<script> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
    var lastJQuery = $.noConflict(); 
    $('#datepicker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: "dd-mm-yy", 
     constrainInput: true, 
     yearRange: "1999:2025", 
     onSelect: function() { 
      alert($('#datepicker').val()); 
     } 
    }); 
</script> 

<div> 
    <label for="timepicker.[1]">Default time picker :</label> 
    <input type="text" style="width: 70px;" id="timepicker.[1]" value="" /> 
    <script type="text/javascript"> 
     lastJQuery(document).ready(function ($) { 
      $('#timepicker\\.\\[1\\]').timepicker({ 
       showAnim: 'blind' 
      }); 
     }); 
    </script> 
</div>

來源

2016-04-30 11:56:19 FoPi

這允許'datePicker'而不是'timePicker'。 – DhavalR

它適合我。你是否改變了這一行：'lastJQuery（document）.ready（function（$）{'注意ready事件處理函數的美元符號參數，這個參數是'j' – FoPi

oops。我錯過了'$'.. 。謝謝哥們。 – DhavalR

請嘗試移動$(selector).datepicker(options) 和$(selector).timepicker(options)調用你的頁面的底部..另外，我發現$ .noConflict（）..這是必要的一些怪異的行爲？

更新時間：this might work for you?

來源

2016-04-30 12:42:27 4UmNinja

多個jQuery版本在一個頁面

回答

相關問題