Question

我已将jQuery 1.10用于datePicker，将jQuery 1.9用于TimePicker（来自fgelinas.com）。

我使用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>

当我在$.noConflict()中尝试timePicker时，它不会让任何控件使用。但是上面的代码只允许使用datePicker。当我删除datePicker脚本时，timePicker运行完美。我必须在一个页面中使用它们。帮助我。感谢。

Answer 1

如果您阅读noConflict文档，可以选择将以前的jQuery保存到这样的变量中： var j = $.noConflict(); 因此，如果您想使用首次加载的jQuery版本，可以使用美元符号，但如果您需要最后加载，则需要使用j。

在当前代码中，首先加载jquery库1.10然后加载1.9并调用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>

Answer 2

尝试移动$(selector).datepicker(options) 和$(selector).timepicker(options)调用你的页面底部..另外，我发现$ .noConflict（）的一些奇怪的行为..这是必要的吗？

已更新： this might work for you?

一个页面中有多个jQuery版本

2 个答案: