将 Bootstrap DatetimePicker 与 Sweet Alert 2 结合使用 - 在警报上显示日历

Question

我正在使用内部有一个表单的 SweetAlert2 对话框。我想使用 Bootstrap DateTimePicker 小部件。

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

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

  }).then(function(result) {

  });

Answer 1

再创建一个 class 您的风格 sheet:

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

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

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

}).then(function(result) {

});

Answer 2

如果您像我一样不希望 sweetalert 的高度在日期时间选择器出现时自动调整大小。在@taekwondoalex 的回答中添加最大高度和最大宽度 (max-height: 550px !important;min-height:550px !important;)。

所以仍然像这样将自定义 class 添加到 sweetalert；

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

}).then(function(result) {

});

然后添加到您的 css 并更改像素高度以匹配您想要的高度，例如 550px

.custom-swal-class {
    overflow-x: visible;
    overflow-y: visible;
    max-height: 550px !important;
    min-height: 550px !important;
}

将 Bootstrap DatetimePicker 与 Sweet Alert 2 结合使用 - 在警报上显示日历

Using Bootstrap DatetimePicker with Sweet Alert 2 - Display calendar over alert

jquery

twitter-bootstrap

bootstrap-datetimepicker

sweetalert2