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

¿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]?

Simplemente expandiendo la respuesta de fusiones. este método de extensión funciona usando 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

Poco tarde para la fiesta, pero esta es 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"); } 

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 de finalización.

Agregue este bloque de script a su página:

  

Espero que esto ayude 🙂

Estaba retocando la respuesta de danteuno y descubrí que, aunque tiene buenas intenciones, lamentablemente se rompe en varios navegadores que no son IE. Esto se debe a que IE será bastante estricto con respecto a lo que acepta como argumento para el constructor de Date , pero otros no. Por ejemplo, Chrome 18 da

 > 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 las “fechas de comparación” y todo va cuesta abajo desde allí (por ejemplo, la new Date("11") es mayor que la new Date("66") y esto es obviamente lo contrario del efecto deseado).

Por lo tanto, después de la consideración, modifiqué el código para dar prioridad a la ruta de “números” sobre la ruta “fechas” y validar que la entrada es de hecho 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 pueden ser obtenidos por jquery’s .val () Metodo similar

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

Recomiendo encarecidamente analizar las cadenas de fechas antes de compararlas. El objeto Fecha de Javascript tiene un análisis sintáctico () – Método, pero solo admite formatos de fecha estadounidenses (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 a la biblioteca date.js gratuita.

Si quieres ser súper fácil de usar para el usuario, puedes usar jquery ui datepickers en lugar de campos de texto. Hay una variante datepicker que permite ingresar rangos de fechas:

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

Por lo tanto, necesitaba que esta regla fuera opcional y ninguna de las sugerencias anteriores es opcional. Si llamo al método, se muestra según se requiera, incluso si lo configuré 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() 

My addMethod no es tan robusto como la respuesta mejor calificada de Mike E., pero estoy usando el jqueryUI datepicker para forzar una selección de fecha. Si alguien puede decirme 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.'); 

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

En javascript / jquery, la mayor parte del desarrollador usa la comparación Desde y hasta la fecha, que es una cadena, sin convertir a formato de fecha. La forma más sencilla de comparar desde la fecha es mayor que la fecha.

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

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

 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 usando la función dividir. luego concat la misma en orden inverso. después de concat nación analizar el número entero. luego compara dos valores en la instrucción if. eg.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 comparar el 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 { } 

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

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

Como una comparación de cuerdas