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

Question

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

Answer 1

Sto solo espandendo la risposta delle fusioni. questo metodo di estensione funziona usando il plugin validato jQuery. 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}.');

Per usarlo:

$("#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
}

Penso che dovrebbe farlo

Answer 3

Poco in ritardo alla 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");
}

Answer 4

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

Answer 5

Stavo solo armeggiando con la risposta di danteuno e ho scoperto che, sebbene di buona volontà, purtroppo è rotto su diversi browser che sono non IE. Questo perché IE sarà piuttosto severo su ciò che accetta come argomento per il costruttore Date, ma altri no. Ad esempio, Chrome 18 fornisce

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

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

Pertanto dopo considerazione ho modificato il codice per dare priorità al " numeri " percorso sopra il " date " percorso e convalida che l'input sia effettivamente numerico con l'eccellente metodo fornito in Convalida i 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}.');

Answer 6

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 date prima di confrontarle. L'oggetto Date di Javascript ha un metodo parse (), ma supporta solo i formati di data statunitensi (AAAA / MM / GG). Restituisce i millisecondi dall'inizio dell'epoca unix, quindi puoi semplicemente confrontare i tuoi valori con & Gt; o < ;.

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

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

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_query_query_query> >

Answer 7

Quindi avevo bisogno che questa regola fosse facoltativa e nessuno dei suggerimenti sopra riportati è 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()

Il mio addMethod non è robusto come la risposta più votata da Mike E., ma sto usando il datepicker JqueryUI per forzare una selezione della data. Se qualcuno può dirmi come assicurarsi che le date siano numeri e che il metodo sia facoltativo 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.');

Answer 8

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 9

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

Answer 10

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

Answer 11

In javascript / jquery la maggior parte degli sviluppatori utilizza l'amplificatore From! Ad oggi confronto che è stringa, senza conversione in formato data. Il modo più semplice per confrontare dalla data è maggiore di oggi è.

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

Analizza sempre da e ad oggi prima del confronto per ottenere risultati accurati

Answer 12

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

Answer 13

Per prima cosa dividi i valori di due caselle di input usando la funzione split. quindi concatri lo stesso in ordine inverso. dopo il concat nazione lo analizza in numero intero. quindi confrontare due valori in in if statement.   es. > 20-11-2018 2 > 21-11-2018

dopo aver diviso e concesso nuovi valori per il confronto 20181120 e 20181121 il dopo che confronta 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 {

}

Answer 14

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

Answer 15

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