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

问题描述

我的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 = "";
    }
    });
}

屏幕截图：

验证过程正常进行，但是当我单击“确定”时，警报并没有立即关闭，并且我无法再次在datepicker模式中选择日期。

我尝试了$('#end').modal('toggle');和$('#end').modal('show');，但是没有用。

问题： 如何隐藏警报模式，然后再次选择日期？

任何帮助将不胜感激。

解决方法

您的代码存在一些问题：

当用户单击Change按钮时，会触发

1. ok事件。它将自动关闭日期选择器，因此您无需手动关闭它。 （请注意，Swal.fire是异步的。）

2. 您不应该手动关闭/打开datepicker模式，它会破坏其中的事件处理程序。相反，您可以使用$("#date").focus();

   打开日期选择器

3. Swal.fire是异步的，并返回承诺。因此，您不应在其旁边放置用于重新打开数据选择器的代码，而应使用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();
    });
});