jquery - 将 Bootstrap DatetimePicker 与 Sweet Alert 2 结合使用 - 显示日历超过警报

Question

我正在使用 SweetAlert2 对话框，其中包含一个表单。我想使用 Bootstrap DateTimePicker 小部件。

日历小部件弹出窗口显示在 SweetAlert 窗口内，而不是显示在其顶部。这使得警报扩展和收缩 - 并且您必须在警报内滚动才能看到日历。所需的行为是日历显示为主页的子页面并显示在警报上方。

https://jsfiddle.net/ghr2bwoc/13/

  swal({
    title: 'Date picker',
    html: '<input id="datepicker">',
    showConfirmButton: false,
    onOpen: function() {
        $('#datepicker').datetimepicker({});
    },

  }).then(function(result) {

  });

Answer 1

在样式表中创建一个附加类:

.swal2-overflow {
  overflow-x: visible;
  overflow-y: visible;
}

使用 customClass 属性将此新类添加到您的甜蜜警报代码中。

swal({
  title: 'Date picker',
  html: '<input id="datepicker">',
  showConfirmButton: false,
  customClass: 'swal2-overflow',
  onOpen: function() {
      $('#datepicker').datetimepicker({});
  },

}).then(function(result) {

});