Change date format to Brazilian default, datepicker Jquery

Question

I’m having a problem with date format, if I put dateFormat: 'dd/mm/yy, my Alert returns me invalid date, if I withdraw and leave American pattern then returns me the date. Any idea how to solve this?

I want to keep the Brazilian standard date, but not only with a mask but the format itself.

Follow the example in Jsfiddle

<div id="teste">
  <label class="fa fa-calendar">
    <input id="startDate" name="start_at" placeholder=" " class="data-charts" type="text" value="">
  </label>
  <label class="fa fa-calendar">
    <input id="endDate" name="end_at" placeholder=" " class="data-charts" type="text" value="">
  </label>
  <button type="button" class="btn btn-apply">Aplicar</button>
</div>

$(document).ready(function() {
    $("#startDate").datepicker({
        numberOfMonths: 1,
        onSelect: function(selected) {
            $("#endDate").datepicker("option","minDate", selected)
        }
    }).datepicker("setDate", "-7", new Date());

    $("#endDate").datepicker({
        numberOfMonths: 1,
        onSelect: function(selected) {
             $("#startDate").datepicker("option","maxDate", selected)
        }
    }).datepicker("setDate", new Date());


    function dateInterval() {
        var data_inicial = document.getElementById("startDate").value;
        var data_final = document.getElementById("endDate").value;

        var date1 = new Date(data_inicial);
        var date2 = new Date(data_final);
        var timeDiff = Math.abs(date2.getTime() - date1.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
            if(diffDays <= 30)
            {
                alert(date1);
            }else
            {
                alert(date1);
            }
    };

    $(".btn-apply").on('click',function(){
        dateInterval();
    });

});

Answer 1

Follow a solution, I just needed to change your . js

$(document).ready(function() {
    $("#startDate").datepicker({
        numberOfMonths: 1,
    dateFormat: "dd/mm/yy",
        onSelect: function(selected) {
            $("#endDate")
      .datepicker("option","minDate", selected)
        }
    }).datepicker("setDate", "-7", new Date());

    $("#endDate").datepicker({
        numberOfMonths: 1,
    dateFormat: "dd/mm/yy",
        onSelect: function(selected) {
             $("#startDate")
       .datepicker("option","maxDate", selected)
        }
    }).datepicker("setDate", new Date());


    function dateInterval() {
        var data_inicial = document.getElementById("startDate").value.split("/");
    var data_final = document.getElementById("endDate").value.split("/");

        var date1 = new Date(data_inicial[2], data_inicial[1] - 1, data_inicial[0]);
        var date2 = new Date(data_final[2], data_final[1] - 1, data_final[0]);
        var timeDiff = Math.abs(date2.getTime() - date1.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
            if(diffDays <= 30)
            {
                alert(date1);
            }else
            {
                alert(date1);
            }
    };

    $(".btn-apply").on('click',function(){
        dateInterval();
    });

});

https://fiddle.jshell.net/LfqwL3kx/16/