1

I've created a modal with sweetalert2 and the input field is a datepicker widget from tempusdominus but the calendar shows behind the buttons of the modal as the following image:

Image

My code is the following:

Swal.fire({
   title: 'Pay',
   html: '<input type="text" name="payment_day" class="datetimepicker-input swal2-input" autocomplete="off" data-toggle="datetimepicker" data-target="#payment_day" id="payment_day">',
   showCancelButton: true,
   confirmButtonColor: '#3085d6',
   cancelButtonColor: '#d33',
   confirmButtonText: 'Confirm',
   cancelButtonText: 'Cancel',
   onOpen: function () {
     $('#payment_day').datetimepicker({
       format: 'L'
     });
   },
}).then((result) => {});
Marco Herrarte
  • 1,540
  • 5
  • 21
  • 42

2 Answers2

1

While you can apply styles to .swal2-content, it is not the recommended way to do it because .swal2-content is the internal class name and it could be changed at any point (very unlikely, but still).

The correct way to handle this would be to use the customClass parameter to add your custom class with z-index:

Swal.fire({
  customClass: {
    popup: 'my-swal',
    content: 'my-swal-content'
  }
})
.my-swal .my-swal-content {
  z-index: 2
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
Limon Monte
  • 52,539
  • 45
  • 182
  • 213
0

and now :

$(function() {
  Swal.fire({
   title: 'Pay',
   html: '<input type="text" name="payment_day" class="datetimepicker-input swal2-input" autocomplete="off" data-toggle="datetimepicker" data-target="#payment_day" id="payment_day">',
   showCancelButton: true,
   confirmButtonColor: '#3085d6',
   cancelButtonColor: '#d33',
   confirmButtonText: 'Confirm',
   cancelButtonText: 'Cancel',
   onOpen: function () {
     $('#payment_day').datetimepicker({
       format: 'L'
     });
   },
}).then((result) => {});
});
.swal2-content
{
      z-index: 2!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.all.js"></script>


<script src="https://cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>


<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
Mohammed Messaoudi
  • 106
  • 7