Valide que la fecha de finalización sea mayor que la fecha de inicio con jQuery

¿Cómo verifico / valido en jQuery si la fecha de finalización [cuadro de texto] es mayor que la fecha de inicio [cuadro de texto]?

Solo expandir las fusiones responde. este método de extensión funciona con el complemento jQuery validate. Validará fechas y números

jQuery.validator.addMethod("greaterThan", 
function(value, element, params) {

    if (!/Invalid|NaN/.test(new Date(value))) {
        return new Date(value) > new Date($(params).val());
    }

    return isNaN(value) && isNaN($(params).val()) 
        || (Number(value) > Number($(params).val())); 
},'Must be greater than {0}.');

Para usarlo:

$("#EndDate").rules('add', { greaterThan: "#StartDate" });

o

$("form").validate({
    rules: {
        EndDate: { greaterThan: "#StartDate" }
    }
});

var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());

if (startDate < endDate){
// Do something
}

Eso debería hacerlo, creo

Un poco tarde para la fiesta pero aquí está mi parte

Date.parse(fromDate) > Date.parse(toDate)

Aquí está el detalle:

var from = $("#from").val();
var to = $("#to").val();

if(Date.parse(from) > Date.parse(to)){
   alert("Invalid Date Range");
}
else{
   alert("Valid date Range");
}

Haga referencia a jquery.validate.js y jquery-1.2.6.js. Agregue una clase startDate a su cuadro de texto de fecha de inicio. Agregue una clase endDate a su cuadro de texto de fecha de finalización.

Agregue este bloque de secuencia de comandos a su página: -

<script type="text/javascript">
    $(document).ready(function() {
        $.validator.addMethod("endDate", function(value, element) {
            var startDate = $('.startDate').val();
            return Date.parse(startDate) <= Date.parse(value) || value == "";
        }, "* End date must be after start date");
        $('#formId').validate();
    });
</script>

Espero que esto ayude :-)

Estaba jugando con la respuesta de danteuno y descubrí que, aunque tenía buenas intenciones, lamentablemente no funciona en varios navegadores que no son IE. Esto se debe a que IE será bastante estricto sobre lo que acepta como argumento para el Dateconstructor, pero otros no. Por ejemplo, Chrome 18 ofrece

> new Date("66")
  Sat Jan 01 1966 00:00:00 GMT+0200 (GTB Standard Time)

Esto hace que el código tome la ruta de "comparar fechas" y todo va cuesta abajo desde allí (por ejemplo, new Date("11")es mayor que new Date("66")y obviamente esto es lo opuesto al efecto deseado).

Por lo tanto, después de considerarlo, modifiqué el código para dar prioridad a la ruta de "números" sobre la ruta de "fechas" y validar que la entrada sea numérica con el excelente método proporcionado en Validar números decimales en JavaScript - IsNumeric () .

Al final, el código se convierte en:

$.validator.addMethod(
    "greaterThan",
    function(value, element, params) {
        var target = $(params).val();
        var isValueNumeric = !isNaN(parseFloat(value)) && isFinite(value);
        var isTargetNumeric = !isNaN(parseFloat(target)) && isFinite(target);
        if (isValueNumeric && isTargetNumeric) {
            return Number(value) > Number(target);
        }

        if (!/Invalid|NaN/.test(new Date(value))) {
            return new Date(value) > new Date(target);
        }

        return false;
    },
    'Must be greater than {0}.');

Los valores de fecha de los campos de texto se pueden obtener mediante el método .val () de jquery como

var datestr1 = $('#datefield1-id').val();
var datestr2 = $('#datefield2-id').val();

Recomiendo encarecidamente analizar las cadenas de fecha antes de compararlas. El objeto Date de Javascript tiene un método parse (), pero solo admite formatos de fecha de EE. UU. (AAAA / MM / DD). Devuelve los milisegundos desde el comienzo de la época de Unix, por lo que simplemente puede comparar sus valores con> o <.

Si desea diferentes formatos (por ejemplo, ISO 8661), debe recurrir a expresiones regulares o la biblioteca gratuita date.js.

Si desea ser súper amigable con el usuario, puede usar jquery ui datepickers en lugar de textfields. Existe una variante de selector de fechas que permite ingresar rangos de fechas:

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

Entonces necesitaba que esta regla fuera opcional y ninguna de las sugerencias anteriores es opcional. Si llamo al método, se muestra como se requiere incluso si lo configuro para que necesite un valor.

Esta es mi llamada:

  $("#my_form").validate({
    rules: {
      "end_date": {
        required: function(element) {return ($("#end_date").val()!="");},
        greaterStart: "#start_date"
      }
    }
  });//validate()

Mi addMethodno es tan robusto como la respuesta mejor calificada de Mike E., pero estoy usando el selector de fecha JqueryUI para forzar una selección de fecha. Si alguien puede decirme cómo asegurarme de que las fechas sean números y que el método sea opcional, sería genial, pero por ahora este método funciona para mí:

jQuery.validator.addMethod("greaterStart", function (value, element, params) {
    return this.optional(element) || new Date(value) >= new Date($(params).val());
},'Must be greater than start date.');

En javascript / jquery, la mayoría de los desarrolladores utilizan la comparación de fecha Desde y Hasta, que es una cadena, sin convertirla al formato de fecha. La forma más sencilla de comparar desde la fecha es mayor que hasta la fecha.

Date.parse(fromDate) > Date.parse(toDate)

Analice siempre desde y hasta la fecha antes de la comparación para obtener resultados precisos

Me gusta lo que dijo Franz, porque es lo que estoy usando: P

var date_ini = new Date($('#id_date_ini').val()).getTime();
var date_end = new Date($('#id_date_end').val()).getTime();
if (isNaN(date_ini)) {
// error date_ini;
}
if (isNaN(date_end)) {
// error date_end;
}
if (date_ini > date_end) {
// do something;
}

$(document).ready(function(){
   $("#txtFromDate").datepicker({
        minDate: 0,
        maxDate: "+60D",
        numberOfMonths: 2,
        onSelect: function(selected) {
          $("#txtToDate").datepicker("option","minDate", selected)
        }
    });

    $("#txtToDate").datepicker({
        minDate: 0,
        maxDate:"+60D",
        numberOfMonths: 2,
        onSelect: function(selected) {
           $("#txtFromDate").datepicker("option","maxDate", selected)
        }
    });
});

O visite este enlace

jQuery('#from_date').on('change', function(){
    var date = $(this).val();
    jQuery('#to_date').datetimepicker({minDate: date});  
});

function endDate(){
    $.validator.addMethod("endDate", function(value, element) {
      var params = '.startDate';
        if($(element).parent().parent().find(params).val()!=''){
           if (!/Invalid|NaN/.test(new Date(value))) {
               return new Date(value) > new Date($(element).parent().parent().find(params).val());
            }
       return isNaN(value) && isNaN($(element).parent().parent().find(params).val()) || (parseFloat(value) > parseFloat($(element).parent().parent().find(params).val())) || value == "";              
      }else{
        return true;
      }
      },jQuery.format('must be greater than start date'));

}

function startDate(){
            $.validator.addMethod("startDate", function(value, element) {
            var params = '.endDate';
            if($(element).parent().parent().parent().find(params).val()!=''){
                 if (!/Invalid|NaN/.test(new Date(value))) {
                  return new Date(value) < new Date($(element).parent().parent().parent().find(params).val());
            }
           return isNaN(value) && isNaN($(element).parent().parent().find(params).val()) || (parseFloat(value) < parseFloat($(element).parent().parent().find(params).val())) || value == "";
                 }
                        else{
                     return true;
}

    }, jQuery.format('must be less than end date'));
}

Espero que esto ayude :)

Primero, divide los valores de dos cuadros de entrada utilizando la función de división. luego concat lo mismo en orden inverso. después de la nación concat, analizarlo a un número entero. luego compare dos valores en la declaración if. p. ej., 1> 20-11-2018 2> 21-11-2018

después de dividir y concat nuevos valores para la comparación 20181120 y 20181121, luego comparar lo mismo.

var date1 = $('#datevalue1').val();
var date2 = $('#datevalue2').val();
var d1 = date1.split("-");
var d2 = date2.split("-");

d1 = d1[2].concat(d1[1], d1[0]);
d2 = d2[2].concat(d2[1], d2[0]);

if (parseInt(d1) > parseInt(d2)) {

    $('#fromdatepicker').val('');
} else {

}

Esto debería funcionar

$.validator.addMethod("endDate", function(value, element) {
            var startDate = $('#date_open').val();
            return Date.parse(startDate) <= Date.parse(value) || value == "";
        }, "* End date must be after start date");

Si se garantiza que el formato es correcto AAAA / MM / DD y exactamente el mismo entre los dos campos, puede usar:

if (startdate > enddate) {
   alert('error'
}

Como una comparación de cadenas