JSFiddle - React, Tailwind, and code Playground

by gustavox

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<form id="formulario">
    
    <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-3">
                <div class="panel panel-default" align="center">
                    <label class="btn" for="Cinsem">
                        <i class="glyphicon glyphicon-calendar"></i>&nbsp;Primeiro dia
                        <input class="form-control" type="text" maxlength="10" placeholder="dd/mm/aaaa"
                               onkeyup="formatar('##/##/####', this)" name="Tinsem3" id="Cinsem"
                               data-validation="birthdate" data-validation-error-msg="Insira uma data válida"
                               data-validation-format="dd/mm/yyyy"></label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default" align="center">
                <label class="btn" for="Cdesl22">
                    <i class="glyphicon glyphicon-calendar"></i>&nbsp;Último dia
                    <input type="text" class="form-control checar" name="Tdesl"  maxlength="10" data-validation="birthdate"
                           data-validation-format="dd/mm/yyyy" data-validation-error-msg="Insira uma data válida" placeholder="dd/mm/aaaa" onkeyup="formatar('##/##/####', this)" id="Cdesl22"></label>
           <!-- Espelho de #aniv1,porém do tipo "date" -->
                    <label for="Cdesl222"></label>
                    <input type="date" id="Cdesl222" name="Cdesl22" class="checar" hidden="hidden" />

                    <!-- Auxilia na validação. Pode ser um DIV também mas precisará alterar o código -->
                    <label for="validou"></label>
                    <input type="text" id="validou" name="validou" hidden="hidden" value="false" />
                </div>
                <div class="col-md-5"></div>
            </div>            
...

JavaScript

// Chama o form.validator 
$.validate({
    modules: 'date',
});

// checa se o form.validator foi true, e abre o botão.

$('.checar')

    .on('validation', function (evt, valid) {
        var validou =  document.getElementById('validou').value = valid ? "true" : "false";

        /* Verifica SE a data está OK */

        if (validou === "true") {
            $('#startBtnseg').removeAttr('disabled');
        }
    });

// checa se a data final é maior que a inicial e abre o botão

     
        var datainicial = document.getElementById('Cinsem');
        var datafinal = document.getElementById('Cdesl22');
      
        function formatar(mascara, documento) {
            var i = documento.value.length;
            var saida = mascara.substring(0, 1);
            var texto = mascara.substring(i);
            if (texto.substring(0, 1) != saida) {
                documento.value += texto.substring(0, 1);
            }
            verificar();
        }

        function gerarData(str) {
            var partes = str.split("/");
            return new Date(partes[2], partes[1] - 1, partes[0]);
        }

        function verificar() {
            var inicio = datainicial.value;
            var fim = datafinal.value;
      
            if (inicio.length != 10 || fim.length != 10) {
                return;
            }
            if (gerarData(fim) >= gerarData(inicio)) {
                $('#startBtnseg').removeAttr('disabled', 'disabled');
            }
        }