How to use date time picker in sweet alert?

This is my code i am 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 date time picker in the input inside sweet alert.

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

When i clicked on the sweet alert, the input field unable to click or do any action on it. The date also didnt show up. Anyone can tell me what’s wrong? Thanks.

Console error when click on input select 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

Use onOpen listerner to trigger datetimepicker

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

Reference: https://sweetalert2.github.io/

Advertisement

Answer