Темпус-Доминус и Подсластитель2 - PullRequest
Новая
       27

Темпус-Доминус и Подсластитель2

1 голос
/ 09 апреля 2019

Я создал модал с sweetalert2 , а полем ввода является виджет DatePicker из tempusdominus , но в календаре за кнопками модала отображается следующее изображение:

image

Мой код следующий: 

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) => {});

Ответы [ 2 ]

1 голос
/ 10 апреля 2019

Хотя вы можете применять стили к .swal2-content, это не рекомендуемый способ сделать это, поскольку .swal2-content является внутренним именем класса, и его можно изменить в любой момент (очень маловероятно, но все же).

Правильный способ справиться с этим - использовать параметр customClass, чтобы добавить свой пользовательский класс с 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>
0 голосов
/ 09 апреля 2019

и сейчас: 

$(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"/>
...