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

Posted 2023-05-08

【中文标题】如何在甜蜜警报中使用日期时间选择器？

【英文标题】：How to use date time picker in sweet alert?

【发布时间】：2018-09-25 19:38:03

【问题描述】：

这是我正在处理的代码

   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)

【问题讨论】：

而您正试图在text: 字段中添加html，我不确定甜蜜警报1 是否支持text 上的HTML 标记

sweet alert 1 将内容转成文本并允许 html by html:true

哦，那好吧。 :+1:

【参考方案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/

【讨论】：

我试过了，但没用。我使用的是 sweetalert 而不是 sweetalert2。

是的，我正在使用这个。

这个版本不支持，这类监听器，要么你必须迁移到 swal2 要么使用这个自定义脚本为 swal1 添加对 OnOpen 的支持jsfiddle.net/w8guq08p/5

我试过了，但也不起作用，输入字段也无法点击。对于 onOpen 功能，我只是添加了警报，但单击我的按钮时也没有显示任何内容。

与其浪费时间让 swal 工作，我建议你迁移到sweetalert2.github.io，它有很多功能和更多的可定制性。我希望这不是一个巨大的迁移，只是核心 CSS 和 js 文件替换。

【参考方案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"/>