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


Respuestas:


177

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

¿Cómo se usa esto con dos cuadros de texto?
Cros

1
Tuve que modificarlo ligeramente para permitir fechas de finalización en blanco en mi aplicación, pero esto hizo la mayor parte. codesi (valor == 0) {devolver verdadero; } else if (! / Invalid | NaN / ...code
Frank Luke

3
Advertencia de error: me doy cuenta de que la pregunta es sobre fechas, pero este código no funcionará para los números como se anuncia. He agregado una respuesta que explica el por qué y el cómo, que también incluye la solución.
Jon

1
@Cros jQuery.validator.addMethod ("zip_code_checking", function (value, element) {return jQuery ('# zip_endvalue'). Val ()> jQuery ('# zip_startvalue'). Val ()}, "* Código postal final el valor debe ser mayor que el valor inicial del código postal ");
Balasuresh Asaithambi

Esto produce un error en Google Chrome. Si pasa un valor menor que 12 o mayor que 31, termina siendo analizado como una fecha y, por lo tanto, también se valida como una fecha. Tuve que separar esto en dos métodos (de prisa), ¡pero me encantaría encontrar una solución más adecuada!
sbsatter

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

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

Eso debería hacerlo, creo


¿Correcto? ¡Gracias! No se necesita ningún complemento. : P
Vael Victus

1
agradable y fácil de implementar, aunque jQuery.validate es increíble
mknopf

Muchas gracias .. tan fácil.
Nimit Joshi

el único problema es cuando tiene un intervalo de fechas que abarca dos años, por ejemplo. 27-06-2015 al 02-02-2016 .... no se validará correctamente
Himansz

Dicho rango de fechas abarca dos años, por ejemplo. 27-06-2015 al 02-02-2016, está debidamente validado para mí.
Thamarai T

19

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

14

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


me gusta esta técnica
wahmal

13

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

esto funciona en ie pero no puedo hacerlo funcionar en opera y FF, ¿alguna idea?
Codificado el

: Aparece el error de validación incluso si la fecha de finalización seleccionada es posterior a la fecha de inicio seleccionada
Codificado

5

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/


5

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

4

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


Esto no proporciona una respuesta a la pregunta. Una vez que tenga suficiente reputación , podrá comentar en cualquier publicación ; en su lugar, proporcione respuestas que no requieran aclaración por parte de quien pregunta . - De la crítica
Mamun

Es la solución a la pregunta. Lo he intentado y respondido.
Kunal Brahme

2

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

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


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

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


0

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 {

}

Agregue una explicación de esta solución
Jan Černý

0

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


-2

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


¿Cómo defino la fecha de inicio y la fecha de finalización en jquery?
entrada

Supongo que son cadenas regulares. Los lees así $ (# startdate: input) .val () y $ (# enddate: input) .val ()
Nadia Alramli
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.