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

Question

I am using the SweetAlert2 dialog with a form inside. I want to use the Bootstrap DateTimePicker widget.

The calendar widget popup is displayed within the SweetAlert window instead of over top of it. This makes the alert expand and contract - and you must scroll inside the alert to see the calendar. The desired behavior is for the calendar to display as a child of the primary page and display over top of the alert.

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

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

  }).then(function(result) {

  });

Answer 1

Create an additional class in your style sheet:

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

Add this new class to your sweet alert code using the customClass attribute.

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

}).then(function(result) {

});

Answer 2

If your are like me and don't want the sweetalert's height to automatically resize when the datetime picker appears. Add a max height and max width (max-height: 550px !important;min-height:550px !important;) to @taekwondoalex's answer.

So still add the custom class to the sweetalert like so;

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

}).then(function(result) {

});

Then add to your css and change the pixel height to match the height you want for example 550px

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