BootStrap与jQuery的冲突

Question

我最初的网页使用的是引导数据报警器。但是，为了使用jQuery添加现有的旧日期选择器，我需要使这两者共存。

我已经阅读了BootStrap DatePicker NoConflict和jQuery ui datepicker conflict with bootstrap datepicker中的文章。

我的编码逻辑是：

步骤1:在引导-datepicker.js之前加载jquery-ui.custom.min.js、bootstrap.min.js、引导-datepicker.js和引导-select.js。

步骤2:添加以下脚本：

  if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) 
  {
    var datepicker = $.fn.datepicker.noConflict();
    $.fn.bootstrapDP = datepicker;
  }

  $(".DatePickerForjQuery-UI").datepicker({});
  $(".DatePickerForBootStrap").bootstrapDP({});

第3步:设置每个数据采集器的参数

$(".DatePickerForjQuery-UI").datepicker({.........});
$(".DatePickerForBootStrap").datepicker({.........});

结果是：$(".DatePickerForjQuery-UI")工作得很好，但是当我点击它的时候，$(".DatePickerForBootStrap")会同时显示Bootstrap和jQueryUI日期选择器.

知道为什么$(".DatePickerForBootStrap")没有正确显示吗？

Answer 1

在jQuery和bootstarp之间发生冲突时，您可以打开jQuery-ui.js，并将datepicker()函数重命名为datepickerj()或任何其他名称。现在它们是两种不同的方法。可以以不同的方式使用它们，不会发生任何冲突，也不会因为css类的冲突而造成任何失真。

Answer 2

终于找到了答案。

在步骤3中，如果我们需要使用引导日期选择器，语法是：

 $(".DatePickerForBootStrap").bootstrapDP({.........});

由于我们已经在步骤2中更新/给出了Bootstrap的新定义。因此，所有相关的引导日期选择函数都将使用"bootstrapDP“来工作。喜欢,

         $('.datepicker-textbox')
          .bootstrapDP({
               update: $(this).val(),
               startDate: '<%= DatePickerStartDate %>',
               format: '<%= DateFormatClientSide %>'
            })
            .on('changeDate', function (ev) {
                $(this).bootstrapDP('hide')
            })
            .on('hide', function (ev) {
                $(this).removeClass('opened');
            });