swal 火灾警报后无法在日期选择器模式中再次选择日期

Question

我的HTML:

<input type="text" id="start" class="form-control" value="">
<input type="text" id="end" class="form-control" value="">
<input type="text" id="pay" class="form-control" value="">

我的 JS：

$(document).ready(function () {
    $("#start,#end").bootstrapMaterialDatePicker({

        startView: "days",
        autoclose: true,
        format: "DD MMMM YYYY", 
        weekStart: 0, 
        time: false,    
    });

    $("#end").change(function () {
    var startDate = document.getElementById("start").value;
    var endDate = document.getElementById("end").value;
 
    if ((Date.parse(endDate) <= Date.parse(startDate))) {
        // alert("End date should be greater than Start date"); //default alert
         $('#end').modal('toggle'); //hide modal when end date is smaller than start date
        Swal.fire({                 //trigger the swal alert

            icon: 'error',

            title: 'Validation',

            text: 'End date should be greater than Start date',


        });
        $('#end').modal('show'); //after alert, input the end date again (not working)
        document.getElementById("end").value = "";
    }
    });
}

截图：

验证过程有效，但是当我单击“确定”时，警报没有立即关闭，我无法再次select日期选择器模式中的日期。

我尝试了 $('#end').modal('toggle'); 和 $('#end').modal('show'); 但它不起作用。

问题：如何隐藏提醒模式，并再次 select 日期？

如有任何帮助，我们将不胜感激。

Answer 1

您的代码有一些问题：

Change 事件在用户单击 ok 按钮时触发。它会自动关闭日期选择器，所以你不需要手动关闭它。（注意 Swal.fire 是异步的。）
您不应该手动 close/open 日期选择器模式，它会破坏其中的事件处理程序。相反，您可以使用 $("#date").focus();
打开日期选择器
Swal.fire 是异步的，returns 是一个承诺。所以你不应该把重新打开数据选择器的代码放在它旁边，而应该使用 Swal.fire(...).then(v => {...}).

完整代码（Run the code on codepen）：

$("#date").bootstrapMaterialDatePicker({
    format: "DD/MM/YYYY",
    lang: "fr",
    weekStart: 1,
    time: false,
    startView: "days",
    autoclose: true
});

$("#date").change(function (e) {
    Swal.fire({
        icon: "error",
        title: "Validation",
        text: "End date should be greater than Start date"
    }).then((v) => {
        $("#date").focus();
    });
});

swal 火灾警报后无法在日期选择器模式中再次选择日期

can't pick date again in datepicker modal after swal fire alert

jquery

alert

sweetalert2