Блог

Мой 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 = "";
    }
    });
}
  

Скриншот:

Процесс проверки сработал, но когда я нажал OK, предупреждение не сразу закрылось, и я не могу снова выбрать дату в режиме datepicker.

Я пробовал $('#end').modal('toggle'); и $('#end').modal('show'); , но это не работает.

Вопрос: Как я могу скрыть режим предупреждения и снова выбрать дату?

Любая помощь была бы оценена.

В вашем коде есть некоторые проблемы :

1. Change событие запускается, когда пользователь нажимает ok кнопку. это автоматически закроет средство выбора даты, поэтому вам не нужно закрывать его вручную. (Обратите внимание, что Swal.fire это асинхронно.)

2. вы не должны вручную закрывать / открывать модал datepicker, это нарушает работу обработчиков событий в нем. вместо этого вы можете открыть datepicker с $("#date").focus();

3. Swal.fire выполняется асинхронно и возвращает обещание. таким образом, вы не должны помещать код для повторного открытия datapicker рядом с ним, вместо этого вы должны использовать Swal.fire(...).then(v => {...}) .

Полный код (запустите код в 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();
    });
});