Question

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

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

我的编码逻辑是：

步骤1：在bootstrap-datepicker.js，bootstrap.min.js，bootstrap-datepicker.js和bootstrap-select.js之前加载jquery-ui.custom.min.js。

步骤2：添加以下脚本：

header

第3步：设置每个的datepicker参数

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

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

结果是：$(".DatePickerForjQuery-UI").datepicker({.........}); $(".DatePickerForBootStrap").datepicker({.........});效果很好，但是当我点击它时，$(".DatePickerForjQuery-UI")会同时显示Bootstrap和jQueryUI日期选择器 ..... < / p>

有任何想法$(".DatePickerForBootStrap")无法正确显示的原因吗？

Answer 1

如果jQuery和bootstarp datepicker之间发生冲突，您可以打开jQuery-ui.js并将datepicker（）函数重命名为datepickerj（）或任何其他名称。现在他们是两种不同的方法。可以通过不同的方式使用它们，没有任何冲突，并且没有任何由于冲突的css类引起的失真

Answer 2

终于找到了答案。

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

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

因为我们已经在步骤2中更新/给出了Bootstrap的新定义。因此，所有相关的Bootstrap日期选择器功能将始终使用＆＃34; bootstrapDP ＆＃34;上班。像，

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

BootStrap和jQuery-UI DatePicker的冲突

2 个答案: