如何在甜蜜警报中使用日期时间选择器？

Question

这是我正在处理的代码

   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
            },

我想在 sweet alert 里面设置日期时间选择器。

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

当我点击甜蜜提醒时，输入框无法点击或对其执行任何操作。日期也没有出现。谁能告诉我怎么了？谢谢

点击输入 select 日期时出现控制台错误

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

使用onOpen监听触发datetimepicker

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

在你的情况下是这样的：

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

参考：https://sweetalert2.github.io/

Answer 2

感谢 Thamaraiselvam。这是我的方法，使用 SweetAlert2 和 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"/>

如何在甜蜜警报中使用日期时间选择器？

How to use date time picker in sweet alert?

php

laravel

sweetalert