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

Question

Come faccio a verificare/convalidare in jQuery se la data di fine [casella di testo] è maggiore della data di inizio [casella di testo]?

Answer 1

Proprio in espansione fuori fusioni rispondere. questo metodo di estensione funziona utilizzando il plugin jQuery validate. Si convaliderà 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}.'); 

usarlo:

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

o

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

Answer 2

Se il formato è garantito per essere corretti AAAA/MM/DD ed esattamente la stessa tra i due campi è possibile utilizzare:

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

Come un confronto di stringhe

Answer 3

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

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

Questo dovrebbe penso che

Answer 4

I valori di data dai campi di testo possono essere recuperati dal metodo jquery's .val() 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 data USA (AAAA/MM/GG). Restituisce i millisecondi dall'inizio dell'epoca unix, quindi puoi semplicemente confrontare i tuoi valori con> o <.

Se si desidera formati diversi (ad esempio ISO 8661), è necessario ricorrere a espressioni regolari o alla libreria date.js gratuita.

Se vuoi essere super-utente, puoi usare jquery ui datepickers invece dei campi di testo. Esiste una variante datepicker che permette di inserire intervalli di date:

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

Answer 5

jquery.validate.js riferimento 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.

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

Answer 6

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

Answer 7

Stavo solo armeggiando con danteuno's answer e ha rilevato che, pur avendo buone intenzioni, purtroppo è rotto su diversi browser che sono non IE. Questo perché IE sarà abbastanza severo su ciò che accetta come argomento per il costruttore Date, ma altri no. Ad esempio, Chrome 18 dà

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

questo modo il codice di prendere il sentiero "confrontare le date" e tutto va in discesa da lì (per esempionew Date("11") è maggiore di new Date("66") e questo è ovviamente l'opposto dell'effetto desiderato).

Pertanto, dopo aver preso in considerazione, ho modificato il codice per dare priorità al percorso "numeri" sul percorso "date" e verificare che l'input sia effettivamente numerico con l'eccellente metodo fornito in Validate decimal numbers 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}.'); 

Answer 8

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 vi aiuterà :)

Answer 9

quindi avevo bisogno di questa regola per essere facoltativa e nessuno dei suggerimenti di cui sopra sono opzionali. Se chiamo il metodo è mostrato come richiesto, anche se l'ho impostato per aver bisogno di un valore.

Questo è il mio invito:

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

mio addMethod non è così robusta come top rated risposta di Mike E., ma sto usando il DatePicker jQueryUI per forzare una selezione della data. Se qualcuno può dirmi come per assicurarsi che le date sono numeri e hanno il metodo sia opzionale che sarebbe grande, 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.'); 

Answer 10

poco in ritardo alla festa, ma qui è 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"); 
} 

Answer 11

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

o visitare a questo link

Answer 12

jQuery('#from_date').on('change', function(){ 
    var date = $(this).val(); 
    jQuery('#to_date').datetimepicker({minDate: date}); 
}); 

Answer 13

in Javascript/jquery la maggior parte dello sviluppatore utilizza Dal & A confronto data che è stringa, senza convertire in formato data. Il modo più semplice per confrontare dalla data è maggiore rispetto ad oggi è.

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

Sempre analizzare da e per la data prima del confronto per ottenere risultati accurati