Convalida che la data di fine sia maggiore della data di inizio con jQuery

Come posso controllare / convalidare in jQuery se la data di fine [casella di testo] è maggiore della data di inizio [casella di testo]?

Basta espandere la risposta alle fusioni. questo metodo di estensione funziona utilizzando il plug-in di convalida jQuery. Validerà date e numeri

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

Per usarlo:

$("#EndDate").rules('add', { greaterThan: "#StartDate" });

o

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

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

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

Penso che dovrebbe bastare

Un po 'tardi per la festa, ma ecco la mia parte

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

Ecco il dettaglio:

var from = $("#from").val();
var to = $("#to").val();

if(Date.parse(from) > Date.parse(to)){
   alert("Invalid Date Range");
}
else{
   alert("Valid date Range");
}

Fare riferimento a jquery.validate.js e jquery-1.2.6.js. Aggiungi una classe startDate alla casella di testo della data di inizio. Aggiungi una classe endDate alla casella di testo della data di fine.

Aggiungi questo blocco di script alla tua pagina: -

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

Spero che questo ti aiuti :-)

Stavo solo armeggiando con la risposta di danteuno e ho scoperto che, sebbene di buone intenzioni, purtroppo non funziona su diversi browser che non sono IE. Questo perché IE sarà piuttosto severo su ciò che accetta come argomento per il Datecostruttore, ma altri no. Ad esempio, Chrome 18 dà

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

Questo fa sì che il codice prenda il percorso "confronta date" e tutto va in discesa da lì (ad esempio new Date("11")è maggiore di new Date("66")e questo è ovviamente l'opposto dell'effetto desiderato).

Quindi, dopo aver considerato, ho modificato il codice per dare priorità al percorso "numeri" sul percorso "date" e convalidare che l'input sia effettivamente numerico con l'eccellente metodo fornito in Convalida numeri decimali in JavaScript - IsNumeric () .

Alla fine, il codice diventa:

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

I valori della data dai campi di testo possono essere recuperati dal metodo .val () di jquery come

var datestr1 = $('#datefield1-id').val();
var datestr2 = $('#datefield2-id').val();

Consiglio vivamente di analizzare le stringhe di data prima di confrontarle. L'oggetto Date di Javascript ha un metodo parse (), ma supporta solo i formati di data USA (AAAA / MM / GG). Restituisce i millisecondi dall'inizio dell'epoca unix, quindi puoi semplicemente confrontare i tuoi valori con> o <.

Se vuoi formati differenti (es. ISO 8661), devi ricorrere alle espressioni regolari o alla libreria gratuita date.js.

Se vuoi essere super user-fiendly, puoi usare jquery ui datepickers invece di textfields. Esiste una variante del selettore di date che consente di inserire intervalli di date:

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

Quindi avevo bisogno che questa regola fosse facoltativa e nessuno dei suggerimenti precedenti è facoltativo. Se chiamo il metodo, viene visualizzato come richiesto anche se lo imposto per richiedere un valore.

Questa è la mia chiamata:

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

La mia addMethodnon è robusta come la risposta più votata di Mike E., ma sto usando il datepicker JqueryUI per forzare una selezione della data. Se qualcuno può dirmi come assicurarmi che le date siano numeri e che il metodo sia opzionale sarebbe fantastico, ma per ora questo metodo funziona per me:

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

In javascript / jquery la maggior parte degli sviluppatori utilizza il confronto di date da e a che è una stringa, senza convertire in formato data. Il modo più semplice per confrontare dalla data è maggiore rispetto alla data.

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

Analizza sempre la data e la data prima del confronto per ottenere risultati accurati

Mi piace quello che ha detto Franz, perché è quello che sto usando: 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)
        }
    });
});

Oppure visita questo link

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

Spero che questo ti aiuti :)

Per prima cosa dividi i valori di due caselle di input utilizzando la funzione di divisione. quindi concatela lo stesso in ordine inverso. dopo la concatenazione, analizzalo come intero. quindi confronta due valori nell'istruzione if. es. 1> 20-11-2018 2> 21-11-2018

dopo aver diviso e concatenato nuovi valori per il confronto 20181120 e 20181121, il successivo confronto lo stesso.

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 {

}

questo dovrebbe funzionare

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

Se si garantisce che il formato sia corretto AAAA / MM / GG e esattamente lo stesso tra i due campi, è possibile utilizzare:

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

Come confronto tra stringhe