How to use date time picker in sweet alert?

Question

This is my code i am working on

Click to copy

   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.

Click to copy

$('#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

Click to copy

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 trigger datetimepicker

Click to copy

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

In your case something like this:

Click to copy

 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/

Answer 2

Thanks to Thamaraiselvam. Here is my way, Using SweetAlert2 and JqueryUI DatePicker:

Click to copy

Swal.fire({
  title: 'pick a date:',
  type: 'question',
  html: '<input id="datepicker" readonly class="swal2-input">',
  customClass: 'swal2-overflow',
  onOpen:function(){
	$('#datepicker').datepicker({
		dateFormat: 'yy/mm/dd'
	});
  }
}).then(function(result) {
	if(result.value){
		alert(	$('#datepicker').val()	);
	}
});

Click to copy

.swal2-overflow {
  overflow-x: visible;
  overflow-y: visible;
}

Click to copy

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8.2.6/dist/sweetalert2.all.min.js" integrity="sha256-Ry2q7Rf2s2TWPC2ddAg7eLmm7Am6S52743VTZRx9ENw=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css"/>