I have an unknown problem with datepicker-CodePudding

var form = document.createElement("div");
form.innerHTML = "<input type='text'  id='Test'>";

swal({
  content: form,
  closeOnEsc: false,
  closeOnClickOutside: false,
});

$('#Test').datepicker();

The swal is displayed without any problem and also input but when I click on input nothing happens.

When I do the same thing in body and out of swal(without sweet alert) its ok and datepicker is active and I can choose a time but the problem is happened when I using swal

CodePudding user response：

You could try the didOpen function:

Popup lifecycle hook. Asynchronously runs after the popup has been shown on screen. Provides popup DOM element as the argument

var form = document.createElement("div");
form.innerHTML = "<input type='text'  id='Test'>";

swal({
  content: form,
  closeOnEsc: false,
  closeOnClickOutside: false,
  didOpen:function(el){
    $('#Test').datepicker();
  }
});

CodePudding user response：

Using didOpen with the current approach

Swal.fire({
  title: 'My Form',
  html: `<input type='text'  id='Test'>`,
  didOpen: function () {
    $('#Test').datepicker();  
  }
});

<link href="https://code.jquery.com/ui/1.13.2/themes/black-tie/jquery-ui.css" rel="stylesheet"/>

<script
  src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB VDvE9tvIXrMQaPlFFSUTR nldQm1LuPXQ="
  crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script
  src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"
  integrity="sha256-lSjKY0/srUM9BE3dPm c4fBo1dky2v27Gdjm2uoZaL0="
  crossorigin="anonymous"></script>