5

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)
Crazy
  • 847
  • 1
  • 18
  • 41

2 Answers2

6

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/

Thamaraiselvam
  • 6,961
  • 8
  • 45
  • 71
  • I tried, but not working. I am using sweetalert not sweetalert2. – Crazy Apr 16 '18 at 06:47
  • Yeah, i am using this one. – Crazy Apr 16 '18 at 06:56
  • This version does not support , these kinda listeners , either you have to migrate to swal2 or use this custom script add support for OnOpen for swal1 http://jsfiddle.net/w8guq08p/5/ – Thamaraiselvam Apr 16 '18 at 07:01
  • I tried, but not working also, the input field also unclickable as well. For the onOpen function, i simply added alert but nothing display also when click on my button. – Crazy Apr 16 '18 at 07:08
  • Rather than wasting time on make swal work, I suggest you migrate to https://sweetalert2.github.io/, it has lots of functionality and more customizable. I hope It is not a huge migration, just core CSS, and js file replacing. – Thamaraiselvam Apr 16 '18 at 07:12
  • It works, but the input field unable to edit. Do you know what's the problem? Although it can choose date, just wonder why the input field unable to edit. – Crazy Apr 16 '18 at 07:17
  • Check console for JS errors. That patch is not fully tested one. – Thamaraiselvam Apr 16 '18 at 07:18
  • I updated my question with the error when click on the input field select date. – Crazy Apr 16 '18 at 07:21
  • Seems like something goes recursive. I am afraid, its hard to fix and waste of time. when already solution is available with sweetalert 2/ – Thamaraiselvam Apr 16 '18 at 07:24
  • I don't think it related to the onOpen function. For the normal input i only can show but unable to edit also. – Crazy Apr 16 '18 at 07:27
  • checked this? https://stackoverflow.com/questions/6095530/maximum-call-stack-size-exceeded-error – Thamaraiselvam Apr 16 '18 at 08:17
  • Thanks. But the main problem for me is the text field unable to edit, no idea why. – Crazy Apr 16 '18 at 08:33
  • I too have no idea, you better to ask a separate question, others may help you. – Thamaraiselvam Apr 16 '18 at 08:57
  • Is there any way other than use onOpen() in swal 1? Something missing in the script like jsfiddle.net/w8guq08p/5, showloaderConfirm. – Crazy Apr 17 '18 at 07:41
  • Glad to know :D – Thamaraiselvam Jul 08 '20 at 13:13
1

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

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() );
 }
});
.swal2-overflow {
  overflow-x: visible;
  overflow-y: visible;
}
<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"/>
LaBUBU
  • 876
  • 8
  • 6