BootStrap和jQuery-UI DatePicker的冲突

Question

我的原始网页正在使用Bootstrap datepicker。 但是，要在jQuery-UI中添加现有的旧日期选择器，我需要使这两个并存。

我已经阅读了BootStrap DatePicker NoConflict和jQuery ui datepicker 与bootstrap datepicker 冲突中的文章。

我的编码逻辑是：

步骤1：在bootstrap-datepicker.js，bootstrap.min.js，bootstrap-datepicker.js和bootstrap-select.js之前加载jquery-ui.custom.min.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 datepicker之间存在冲突，则可以打开jQuery-ui.js并将datepicker（）函数重命名为datepickerj（）或任何其他名称。 现在它们是两种不同的方法。 可以通过不同的方式使用它们，而不会由于冲突的CSS类而引起任何冲突且不会造成任何失真

Answer 2

终于找到答案了。

在步骤3中，如果需要使用Bootstrap日期选择器，则语法为：

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

由于我们已经在步骤2中更新/给出了Bootstrap的新定义。因此，所有相关的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');
            });