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

Simplement élargir la réponse aux fusions. cette méthode d'extension fonctionne en utilisant le plugin jQuery validate. Il validera les dates et les nombres

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
}

Cela devrait le faire je pense

Un peu tard à 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: -

<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 t'aides :-)

J'étais juste en train de bricoler la réponse de danteuno et j'ai trouvé que bien que bien intentionné, il est malheureusement cassé sur plusieurs navigateurs qui ne sont pas IE. C'est parce que IE sera assez strict sur ce qu'il accepte comme argument du Dateconstructeur, mais pas d'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 va en descente à partir de là (par exemple new Date("11")est supérieur à new Date("66")et c'est évidemment l'opposé de l'effet désiré).

Par conséquent, après réflexion, j'ai modifié le code pour donner la priorité au chemin "nombres" sur le chemin "dates" et valider 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 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 renvoie les millisecondes depuis le début de l'époque Unix, vous pouvez donc simplement comparer vos valeurs avec> ou <.

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

Si vous voulez être un super utilisateur, vous pouvez utiliser jquery ui datepickers au lieu de textfields. Il existe une variante de datepicker qui permet de saisir 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 requis, même si je la définit comme nécessitant une valeur.

C'est mon appel:

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

Mon addMethodn'est pas aussi robuste que la réponse la mieux notée de Mike E., mais j'utilise le sélecteur de date JqueryUI pour forcer une sélection de date. Si quelqu'un peut me dire comment m'assurer que les dates sont des nombres et que la méthode soit facultative, 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.');

Dans javascript / jquery, la plupart des développeurs utilisent la comparaison de date De & À qui est une chaîne, sans conversion au format de date. Le moyen le plus simple de comparer à partir de la date est supérieur à celui de la date.

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

Toujours analyser de et à date avant la comparaison pour obtenir des résultats précis

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

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

Tout d'abord, vous divisez les valeurs de deux boîtes de saisie en utilisant la fonction de division. puis concattez la même chose dans l'ordre inverse. après concat nation, analysez-le en entier. puis comparez deux valeurs dans l'instruction if. par exemple 1> 20-11-2018 2> 21-11-2018

après avoir divisé et concaté de nouvelles valeurs pour la comparaison 20181120 et 20181121, après cela, comparez 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 exactement le même entre les deux champs, vous pouvez utiliser:

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

En tant que comparaison de chaînes