Question

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

2018-04-16

14652

php laravel sweetalert

这是我正在处理的代码

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

我想在甜蜜警报内的输入中设置日期时间选择器。

$('#datetimepicker').datetimepicker({
    format: 'DD/MM/YYYY hh:mm A',
    defaultDate: new 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

使用 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/[email protected]/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"/>