Validar que la fecha final es mayor que la fecha de inicio con jQuery

Question

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

Answer 1

Solo expandiendo la respuesta de fusiones. Este método de extensión funciona utilizando el complemento de validación jQuery. 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" }
    }
});

Answer 2

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

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

Eso debería hacerlo, creo

Answer 3

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

Answer 4

Referencia 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 final.

Agregue este bloque de script 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 :-)

Answer 5

Yo sólo estaba jugando con danteuno la respuesta y encontró que, aunque con buenas intenciones, lamentablemente se ha roto en varios navegadores que son no Es decir.Esto es debido a que es decir, serán muy estrictas acerca de lo que acepta como argumento para la Date constructor, pero otros no.Por ejemplo, el Cromo 18 da

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

Esto hace que el código para tomar el "comparar fechas" ruta de acceso y todo va cuesta abajo desde allí (por ejemplo, new Date("11") es mayor que new Date("66") y esta es, obviamente, el efecto inverso al deseado).

Por lo tanto, después de considerar la he modificado el código para dar prioridad a los "números" ruta de las "fechas" ruta de acceso y validar que la entrada es de hecho numérico con el excelente método, siempre en Validar números decimales en JavaScript - IsNumeric().

En la 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}.');

Answer 6

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 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 & Gt; o < ;.

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

Si quieres ser súper amigable con el usuario, puedes usar jquery ui datepickers en lugar de campos de texto. 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_ssc> >

Answer 7

Así que necesitaba que esta regla fuera opcional y ninguna de las sugerencias anteriores es opcional. Si llamo al método, se muestra como requerido, 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 addMethod no es tan robusto como la respuesta mejor calificada de Mike E., pero estoy usando el selector de fechas JqueryUI para forzar una selección de fecha. Si alguien me puede decir cómo asegurarse 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.');

Answer 8

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

Answer 9

$(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

Answer 10

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

Answer 11

En javascript / jquery, la mayoría de los desarrolladores usan From & amp; Hasta la fecha de comparación que es una cadena, sin convertir a formato de fecha. La forma más sencilla de comparar desde la fecha es mayor que hasta la fecha es.

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

Siempre analice desde y hasta la fecha antes de la comparación para obtener resultados precisos

Answer 12

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 :)

Answer 13

Primero se dividen los valores de dos cuadros de entrada mediante la función de división. entonces concat lo mismo en orden inverso. después de que la nación concat lo analice como entero. luego compare dos valores en la declaración if.   por ejemplo, 1 > 20-11-2018 2 > 21-11-2018

después de dividir y concat nuevos valores para la comparación 20181120 y 20181121, después de eso, compare 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 {

}

Answer 14

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

Answer 15

Si se garantiza que el formato sea 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