I have an unknown problem with datepicker

Question

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

It may be the case that the `datepicker` library needs the element to be part of the DOM before you instantiate it (so that it knows where to position the dropdowns etc). Try appending the element to the DOM first, *then* calling `datepicker()` on the `input` — Rory McCrossan, Oct 03 '22 at 20:08
Welcome to Stack Overflow! Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) — mplungjan, Oct 03 '22 at 20:15
Welcome to Stack Overflow. You may have assigned the `datepicker` before the input was appended to the DOM. This would cause it to fail. Do you see any errors in console? — Twisty, Oct 03 '22 at 23:41

score 1 · Answer 1 · answered Oct 03 '22 at 20:20

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();
  }
});

score 1 · Accepted Answer · answered Oct 03 '22 at 20:21

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>

I have an unknown problem with datepicker

2 Answers2