Valider que la date de fin est supérieure à la date de début avec jQuery

Comment vérifier / valider dans jQuery si la date de fin [zone de texte] est supérieure à la date de début [zone de texte]?

Il suffit d’élargir la réponse aux fusions. cette méthode d’extension fonctionne avec le plugin jQuery validate. Il validera les dates et les numéros

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

Pour l’utiliser:

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

ou

 $("form").validate({ rules: { EndDate: { greaterThan: "#StartDate" } } }); 
 var startDate = new Date($('#startDate').val()); var endDate = new Date($('#endDate').val()); if (startDate < endDate){ // Do something } 

Ça devrait le faire je pense

Peu de retard à la fête mais voici ma part

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

Voici le détail:

 var from = $("#from").val(); var to = $("#to").val(); if(Date.parse(from) > Date.parse(to)){ alert("Invalid Date Range"); } else{ alert("Valid date Range"); } 

Référence jquery.validate.js et jquery-1.2.6.js. Ajoutez une classe startDate à votre zone de texte de date de début. Ajoutez une classe endDate à votre zone de texte de date de fin.

Ajoutez ce bloc de script à votre page: –

  

J'espère que cela t'aides 🙂

Je ne faisais que bricoler la réponse de danteuno et j’ai trouvé que, bien intentionnée, malheureusement, elle est cassée sur plusieurs navigateurs qui ne sont pas IE. C’est parce que IE sera assez ssortingct sur ce qu’il accepte comme argument pour le constructeur Date , mais pas les autres. Par exemple, Chrome 18 donne

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

Cela amène le code à prendre le chemin “comparer les dates” et tout se déroule à partir de là (par exemple, la new Date("11") est supérieure à la new Date("66") ).

Par conséquent, après examen, j’ai modifié le code pour donner la priorité au chemin “numbers” sur le chemin “dates” et valider que l’entrée est bien numérique avec l’excellente méthode fournie dans Validate decimal numbers in JavaScript – IsNumeric () .

Au final, le code devient:

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

Les valeurs de date des champs de texte peuvent être récupérées par la méthode .val () de jquery comme

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

Je recommande fortement d’parsingr les chaînes de dates avant de les comparer. L’object Date de Javascript a une méthode parse (), mais il ne prend en charge que les formats de date américains (AAAA / MM / JJ). Il renvoie les millisecondes depuis le début de l’époque Unix, vous pouvez donc simplement comparer vos valeurs avec> ou <.

Si vous voulez des formats différents (ex: ISO 8661), vous devez avoir recours à des expressions régulières ou à la bibliothèque gratuite date.js.

Si vous voulez être super-utilisateur, vous pouvez utiliser jpery up au lieu de champs de texte. Il existe une variante de datepicker qui permet d’entrer des plages de dates:

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

J’avais donc besoin que cette règle soit facultative et aucune des suggestions ci-dessus n’est facultative. Si j’appelle la méthode, elle s’affiche comme requirejs, même si je lui atsortingbue une valeur.

Ceci est mon appel:

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

Mon addMethod n’est pas aussi robuste que la réponse la mieux notée de Mike E., mais j’utilise le datpicker JqueryUI pour forcer une sélection de date. Si quelqu’un peut me dire comment s’assurer que les dates sont des nombres et que la méthode est optionnelle, ce serait génial, mais pour l’instant cette méthode fonctionne pour moi:

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

J’aime ce que Franz a dit, parce que c’est ce que j’utilise: 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) } }); }); 

Ou visitez ce lien

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

Dans javascript / jquery, la plupart des développeurs utilisent la comparaison de dates From & To, qui est une chaîne, sans conversion au format de date. La façon la plus simple de comparer la date est plus grande que la date actuelle.

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

Toujours parsingr à partir de et à jour avant la comparaison pour obtenir des résultats précis

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

J'espère que cela aidera 🙂

D’abord, vous divisez les valeurs de deux zones de saisie en utilisant la fonction split. puis concaténer dans l’ordre inverse. après concat nation, parsingz-le en entier. puis comparez deux valeurs dans l’instruction if. eg.1> 20-11-2018 2> 21-11-2018

après la scission et concaturer de nouvelles valeurs pour la comparaison 20181120 et 20181121 après que comparer les mêmes.

 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 le format est garanti pour être correct AAAA / MM / JJ et exactement le même entre les deux champs, vous pouvez utiliser:

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

En comparaison de chaîne