datepicker calendar opens and closes when you click the form Submit button

Question

Hello.

I got a problem here.

I have an aspnet mvc form with c# that has two datepicker:

<form id="formBuscar" action="PaginaDeDeAcertosDaQuestao" class="form-horizontal box3">

@Html.TextBoxFor(model => model.DataDeInicioDaQuestao, "{0:dd/MM/yyyy}", new { @Value = Model.DataDeInicioDaQuestao, @class = "datepicker", @id = "DataDeInicioDaQuestao"})

@Html.TextBoxFor(model => model.DataDeFimDaQuestao, "{0:dd/MM/yyyy}", new { @Value = Model.DataDeFimDaQuestao, @class = "datepicker", @id = "DataDeInicioDaQuestao"})

</form>

There is also the jquery validate plugin to validate the form. I put the 'validarDiferencaData' method in the 'onselect' to validate that the initial date is less than the final date, I put validation on these two dates in the validate plugin as well. The javascript:

$(document).ready(function () {


var validarDiferencaDeDatas = function () {

            $("#DataDeInicioDaQuestao").removeClass("error");
            $("label[for='DataDeInicioDaQuestao']").remove();

            var dataInicio = new Date($("#DataDeInicioDaQuestao").val().split('/')[2], $("#DataDeInicioDaQuestao").val().split('/')[1] - 1, $("#DataDeInicioDaQuestao").val().split('/')[0]);
            var dataFim = new Date($("#DataDeFimDaQuestao").val().split('/')[2], $("#DataDeFimDaQuestao").val().split('/')[1] - 1, $("#DataDeFimDaQuestao").val().split('/')[0])
            var diff = 0;
            if (dataInicio && dataFim) {
                diff = Math.floor((dataFim.getTime() - dataInicio.getTime()) / 86400000); // ms per day

            }
            if (diff < 0) {
                var validator = $("#DataDeInicioDaQuestao").validate();
                var validador = validator.element("#DataDeInicioDaQuestao");
                return false;
            }
            else {
                $("#DataDeInicioDaQuestao").removeClass("error");
                $("label[for='DataDeInicioDaQuestao']").remove();
                return true;
            }
        }

  
   $(".datepicker").datepicker({
            autoclose: true,
            buttonImageOnly: true,
            showAnim: 'slideDown',
            duration: 'fast',
            buttonText: "Calendário",
            dateFormat: 'dd/mm/yy',
            showOn: "both",
            changeMonth: true,
            changeYear: true,
            buttonImage: "../Content/images/calendario.png",
            clearBtn: true,
            dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'],
            dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
            dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
            monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
            monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
            onSelect: validarDiferencaDeDatas
        });
        
         $.validator.addMethod("validarDatas",
            function (value) {

                $("#DataDeInicioDaQuestao").removeClass("error");
                $("label[for='DataDeInicioDaQuestao']").remove();

                var dataInicio = new Date(value.split('/')[2], value.split('/')[1] - 1, value.split('/')[0]);
                var dataFim = new Date($("#DataDeFimDaQuestao").val().split('/')[2], $("#DataDeFimDaQuestao").val().split('/')[1] - 1, $("#DataDeFimDaQuestao").val().split('/')[0])
                var diff = 0;
                if (dataInicio && dataFim) {
                    diff = Math.floor((dataFim.getTime() - dataInicio.getTime()) / 86400000); // ms per day
                }
                
                if (diff < 0) {
                    return false;
                }
                else {

                    $("#DataDeInicioDaQuestao").removeClass("error");
                    $("label[for='DataDeInicioDaQuestao']").remove();
                    return true;
                }

            }, '@Mensagens.DataFimMaiorQAInicio');

        $("#formBuscar").validate({
           
            rules: {     
                DataDeInicioDaQuestao: {
                    required: true,
                    validarDatas: '#DataDeInicioDaQuestao'
                },
                DataDeFimDaQuestao: {
                    required: true,
                    validarDatas: '#DataDeInicioDaQuestao'
                }
            },
            messages: {
               
                DataDeInicioDaQuestao: {
                    date: '<div class="grid_3"> @Mensagens.Sistema_Campo_Invalido </div>',

                },
                DataDeFimDaQuestao: {
                    date: '<div class="grid_3"> @Mensagens.Sistema_Campo_Invalido </div>',

                }
            }
        });
        
    
    
        $('#btn_submit').click(function (event) {
            $("#DataDeInicioDaQuestao").datepicker("hide");
            if ($('#formBuscar').valid()) {
                $('#PesquisaNova').val(true);
            }
        });
       
  
  });

It validates perfectly. The problem is this: after I have put a wrong date and validate it in the correct way, when I click on 'Submit' the datepicker calendar appears and disappears quickly, even if I put the '$("#Dateequestao"). datepicker("Hide");' in button Ubmit.

When I give Submit with correct validation (no error) it does not happen.

Could someone help me?