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


Réponses:


177

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

Comment utilisez-vous cela avec deux zones de texte?
Cros

1
J'ai dû le modifier légèrement pour permettre des dates de fin vides dans mon application, mais cela a fait le gros. codeif (valeur == 0) {return true; } else if (! / Invalid | NaN / ...code
Frank Luke

3
Avertissement de bogue: je me rends compte que la question concerne les dates, mais ce code ne fonctionnera pas pour les nombres comme annoncé. J'ai ajouté une réponse expliquant le pourquoi et le comment qui inclut également le correctif.
Jon

1
@Cros jQuery.validator.addMethod ("zip_code_checking", function (value, element) {return jQuery ('# zip_endvalue'). Val ()> jQuery ('# zip_startvalue'). Val ()}, "* Code postal end la valeur doit être supérieure à la valeur de début du code postal ");
Balasuresh Asaithambi

Cela génère une erreur dans Google Chrome. Si vous transmettez une valeur inférieure à 12 ou supérieure à 31, elle finit par être analysée en tant que date et, par conséquent, elle est également validée en tant que date. J'ai dû séparer cela en deux méthodes (pressées), mais j'aimerais trouver une solution plus appropriée!
sbsatter

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

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

Cela devrait le faire je pense


Droite? Merci! Aucun plugin nécessaire. : P
Vael Victus

1
agréable et facile à implémenter, bien que jQuery.validate soit génial
mknopf

Merci beaucoup ... si facile.
Nimit Joshi

le seul problème est lorsque vous avez une plage de dates s'étendant sur deux ans, par exemple. 27-06-2015 au 02-02-2016 .... il ne validera pas correctement
Himansz

Une telle plage de dates s'étalant sur deux ans, par exemple. 27-06-2015 au 02-02-2016, est validé correctement pour moi.
Thamarai T

19

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

14

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'aime cette technique
wahmal

13

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

cela fonctionne dans ie mais ne peut pas le faire fonctionner dans l'opéra et FF, des idées?
Codé le

: Il
génère

5

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/


5

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

4

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


Cela ne répond pas à la question. Une fois que vous aurez une réputation suffisante, vous pourrez commenter n'importe quel message ; au lieu de cela, fournissez des réponses qui ne nécessitent pas de clarification de la part du demandeur . - De l'avis
Mamun

C'est la solution à la question. J'ai essayé et j'ai répondu.
Kunal Brahme

2

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

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

Ou visitez ce lien


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

J'espère que cela aidera :)


0

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 {

}

Veuillez ajouter une explication de cette solution
Jan Černý

0

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


-2

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


comment définir la date de début et la date de fin dans jquery?
entrée

Je suppose que ce sont des chaînes régulières. Vous les lisez comme ça $ (# startdate: input) .val () and $ (# enddate: input) .val ()
Nadia Alramli
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.