How to use date picker in sweet alert?

Question

This is my code I'm working on.

   swal({
                title: "Confirm details?",
                text:'<input id="datetimepicker" class="form-control" autofocus>',
                type: "warning",
                customClass: 'swal-custom-width',
                html:true,
                showCancelButton: true,
                confirmButtonClass: "btn-success",
                confirmButtonText: "Confirm",
                cancelButtonText: "Cancel",
                closeOnConfirm: false,
                closeOnCancel: false,
                showLoaderOnConfirm: true
            },

I want to set a timing for selecting a date in an input inside a sweet alert.

$('#datetimepicker').datetimepicker({
    format: 'DD/MM/YYYY hh:mm A',
    defaultDate: new Date()
});

When I clicked on the sweet warning, the input box cannot click or do anything on it. The date also did not appear. Can anyone tell me what happened? Thank.

Console error when clicking on input selection date

Uncaught RangeError: Maximum call stack size exceeded.
at HTMLDivElement.trigger (jquery-2.2.3.min.js:3)
at Object.trigger (jquery-2.2.3.min.js:4)
at HTMLDivElement.<anonymous> (jquery-2.2.3.min.js:4)
at Function.each (jquery-2.2.3.min.js:2)
at n.fn.init.each (jquery-2.2.3.min.js:2)
at n.fn.init.trigger (jquery-2.2.3.min.js:4)
at c.<anonymous> (bootstrap.min.js:6)
at HTMLDocument.f (jquery-2.2.3.min.js:2)
at HTMLDocument.dispatch (jquery-2.2.3.min.js:3)
at HTMLDocument.r.handle (jquery-2.2.3.min.js:3)

Answer 1

Use onOpen listerner to rundatetimepicker

onOpen: function() {
      $('#datetimepicker').datetimepicker({
         format: 'DD/MM/YYYY hh:mm A',
         defaultDate: new Date()
  });
},

In your case, something like this:

 swal({
    title: "Confirm details?",
    html:'<input id="datetimepicker" class="form-control" autofocus>',
    type: "warning",
    onOpen: function() {
        $('#datetimepicker').datetimepicker({
            format: 'DD/MM/YYYY hh:mm A',
            defaultDate: new Date()
        });
    }
}

Link: https://sweetalert2.imtqy.com/