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

https://stackoverflow.com/questions/833997

08-07-2019
|

Question

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

La solution

En développant simplement les fusions, répondez. cette méthode d'extension fonctionne à l'aide du plugin jQuery validate. Il va valider les dates et les chiffres

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

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

Autres conseils

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

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

Cela devrait le faire, je pense

Un peu tard pour 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érencez 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: -

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

J'espère que cela vous aidera: -)

Je me contentais de bricoler la réponse de danteuno et de constater que, même s'il était bien intentionné, il était cassé par plusieurs navigateurs pas IE. En effet, IE sera assez strict sur ce qu’il accepte comme argument du constructeur Date, alors que d’autres ne le feront pas. Par exemple, Chrome 18 donne

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

Le code prend alors & "; comparer les dates &"; chemin et tout s’en va en aval (par exemple, new Date("11") est supérieur à new Date("66") et c’est évidemment le contraire de l’effet recherché).

Par conséquent, après réflexion, j'ai modifié le code pour donner la priorité aux " nombres " chemin au-dessus des & dates " chemin et validez que l'entrée est bien numérique avec l'excellente méthode fournie dans Valider les nombres décimaux en 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 vous recommande fortement d'analyser les chaînes de date avant de les comparer. L'objet 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 retourne les millisecondes depuis le début de l'époque unix, vous pouvez donc simplement comparer vos valeurs avec & Gt; ou <.

Si vous souhaitez utiliser différents formats (ISO 8661, par exemple), vous devez recourir aux expressions régulières ou à la bibliothèque gratuite date.js.

Si vous voulez être super-utilisateur, vous pouvez utiliser jquery ui datepickers au lieu de textfields. Il existe une variante datepicker qui permet de saisir des plages de dates:

J'avais donc besoin que cette règle soit optionnelle et aucune des suggestions ci-dessus n'est facultative. Si j'appelle la méthode, elle s'affiche comme il se doit, même si je la définis comme nécessitant 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 datepicker de JqueryUI pour forcer la sélection de la date. Si quelqu'un peut me dire comment faire en sorte que les dates soient des nombres et que la méthode soit facultative, ce serait formidable, 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, car 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 From & amp; Pour la comparaison de date qui est une chaîne, sans conversion au format de date. Le moyen le plus simple de comparer date à partir est supérieur à ce jour.

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

Toujours analyser les données de et à ce 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 vous aidera:)

Vous divisez d’abord les valeurs de deux zones de saisie à l’aide de la fonction split. puis concattez la même chose dans l'ordre inverse. après concat nation analyser en entier. puis comparer deux valeurs dans dans si déclaration. par exemple.1 > 20-11-2018 2 > 21-11-2018

après division et concaténation de nouvelles valeurs pour la comparaison 20181120 et 20181121, les valeurs suivantes comparent 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 {

}

cela devrait fonctionner

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

S'il est garanti que le format est correct AAAA / MM / JJ et identique entre les deux champs, vous pouvez utiliser:

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

En tant que comparaison de chaîne

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow