Validação de data do datepicker

[cavalcantejean 0]

Eu já tenho o datepicker para pegar a data inicial e a data final, ele já faz a validação quando o usuário clica somente no calendário, mas quando é digitado, não é validado. Então pensei em algo assim:

    datePickerRange: function () {

        if ($(this).length != 2) return;

        var dteIni = $(this)[0];
        var dteFrom = $(this)[1];

        var dates = $(this).datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            numberOfMonths: 1,
            onSelect: function (selectedDate) {

                var option = this.id == dteIni.id ? "minDate" : "maxDate",
					instance = $(this).data("datepicker"),
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings);
                dates.not(this).datepicker("option", option, date);
            }
        })
        .change(function () {
            var dataInicial = $(this).data("datepicker");
            if (minDate > maxDate)
                alert("Data Inicial maior que a Final");
            if (maxDate < minDate)
                alert("Data Final manor que a Inicial");
        });
        ;
    },

Mas a função do change não me retorna nada, como posso resolver esta situação?

[angelorubin 142]

Algo assim não funcionaria?

$( "#datepicker" ).datepicker({
    dateFormat: "dd/mm/yy",
    beforeShow: function(){
        $(this).on('focusout', function(){
            var data = $(this).val();
            console.log(data);
            // FAÇA A VALIDAÇÃO DA DATA DIGITADA AQUI
        });
    }
});

Veja um exemplo aqui em funcionamento - http://jsfiddle.net/angelorubin/vvr3k0zg

[cavalcantejean 0]

    datePickerRange: function () {

        if ($(this).length != 2) return;

        var dteIni = $(this)[0];
        var dteFrom = $(this)[1];

        var dates = $(this).datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            numberOfMonths: 1,
            onSelect: function (selectedDate) {

                var option = this.id == dteIni.id ? "minDate" : "maxDate",
					instance = $(this).data("datepicker"),
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings);
                dates.not(this).datepicker("option", option, date);
            }
        });
    },

    $( "#datepicker" ).datepicker({
        dateFormat: "dd/mm/yy",
        beforeShow: function(){
            $(this).on('focusout', function(){
                var data = $(this).val();
                console.log(data);
                if (minDate > maxDate)
                    alert("Data Inicial maior que a Final");
            });
        }
    });

Assim? Dessa maneira não deu certo

[angelorubin 142]

Você pode utilizar esse plugin - http://keith-wood.name/uidatepickervalidation.html

 

Lembrando que se você não fizer validações server-side de nada adiantara em termos de segurança.