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

Question

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

Answer 1

Je développe juste la réponse de Fusion. 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" });

o

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

Answer 2

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

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

Cela devrait le faire, je pense.

Answer 3

Je suis arrivé un peu tard à la fête mais voici ma partie

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

Answer 4

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

Answer 5

J'étais juste en train de bricoler La réponse de danteuno et j'ai constaté que, bien que partant d'une bonne intention, il ne fonctionne malheureusement pas sur plusieurs navigateurs qui sont no IE. En effet, IE sera assez strict quant à ce qu'il accepte comme argument de la fonction Date mais 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 le chemin de la "comparaison des dates" et tout se dégrade à partir de là (ex. new Date("11") est supérieure à 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é au chemin "numbers" 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}.');