Estou tentando comparar duas datas vindas de campos `text`, transformando-as em objeto `Date`, da seguinte forma (a primeira função é pra formatar o campo `input` com `XX/XX/XXXX`):

<!-- begin snippet: js hide: false -->

<!-- language: lang-js -->

    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);
        }
    }

    if(new Date('#datafinal') <= new Date('#datainicial'))
    {

    alert("A data inicial é maior que a data final");
      
    }

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="text" maxlength="10" placeholder="dd/mm/aaaa"
                           OnKeyPress="formatar('##/##/####', this)" id="datainicial">
    <br>
                    <input type="text" maxlength="10" placeholder="dd/mm/aaaa"
                           OnKeyPress="formatar('##/##/####', this)" id="datafinal">

<!-- end snippet -->


Mas não está dando certo. Acho que pode ser pelo formato que chega do `input`, mas não tenho certeza. Dei uma pesquisada no SOen e [existem várias perguntas com muitas respostas][1], mas nenhuma das que vi conseguiu resolver pra mim. 

Basicamente, preciso que quando a pessoa acabe de digitar (antes de clicar no botão enviar) retorne um `alert` caso a data final seja menor que a inicial. Alguma luz?
 
  [1]: https://www.google.com.br/search?q=compare%20dates%20and%20display%20alert%20jquery&oq=compare%20da&aqs=chrome.0.69i59j69i57j69i59l2j69i60l2.2618j0j4&sourceid=chrome&es_sm=93&ie=UTF-8#q=site:stackoverflow.com%20jquery%20comparing%20dates