web-dev-qa-db-fra.com

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

jquerydatejquery-validate
94
input

Répondez simplement aux fusions. 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" });

ou

$("form").validate({
    rules: {
        EndDate: { greaterThan: "#StartDate" }
    }
});
163
Mike E.
var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());

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

Ça devrait le faire je pense

78
Shane O'Grady

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

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.

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

14
Russell Giddings

J'étais juste en train de bricoler la réponse de danteuno et j'ai constaté que même s'il est bien intentionné, il est malheureusement défectueux sur plusieurs navigateurs qui ne sont pas IE. En effet, IE sera assez strict sur ce qu'il accepte comme argument du constructeur Date, mais les 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)

Cela fait que le code prenne le chemin "comparer les dates" et tout en découle (par exemple, new Date("11") est supérieur à new Date("66") et il s'agit évidemment du contraire de l'effet souhaité).

Par conséquent, après examen, j'ai modifié le code pour donner la priorité au chemin "numéros" par rapport au 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}.');
13
Jon

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

Si vous souhaitez utiliser différents formats (ISO 8661, par exemple), vous devez recourir aux expressions régulières ou à la bibliothèque libre 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:

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

5
Franz

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 est affichée comme il est requis, 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()

Ma 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 une sélection de 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 le moment, 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
Charity
jQuery('#from_date').on('change', function(){
    var date = $(this).val();
    jQuery('#to_date').datetimepicker({minDate: date});  
});
2
Atchyut Nagabhairava

En javascript/jQuery, la plupart des développeurs utilisent la comparaison de date De & À qui est une chaîne, sans conversion au format de date ..__ La méthode la plus simple pour comparer une date à une autre est supérieure à la date.

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

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

2
Kunal Brahme
$(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 visite à ce link

2
saggy

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
StefanNch
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 ça va aider :)

1
Wordpress Joomla freelancer

cela devrait marcher

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

0
Bagaskara

Vous divisez d’abord les valeurs de deux boîtes de saisie à l’aide de la fonction split ..__, puis concattez-les dans l’ordre inverse . Après avoir concat nation, analysez-les en entier . . 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, la comparaison ultérieure est identique. 

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 {

}
0
Suraj Khot