Überprüfen Sie mit jQuery, ob das Enddatum größer als das Startdatum ist

Wie überprüfe / validiere ich in jQuery, ob das Enddatum [Textfeld] größer als das Startdatum [Textfeld] ist?

Nur Fusionen erweitern Antwort. Diese Erweiterungsmethode funktioniert mit dem jQuery-Validierungs-Plugin. Es werden Daten und Zahlen validiert

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

Um es zu benutzen:

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

oder

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

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

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

Das sollte es tun, denke ich

Etwas spät zur Party, aber hier ist mein Teil

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

Hier ist das Detail:

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

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

Referenz jquery.validate.js und jquery-1.2.6.js. Fügen Sie Ihrem Startdatum-Textfeld eine startDate-Klasse hinzu. Fügen Sie Ihrem Enddatum-Textfeld eine endDate-Klasse hinzu.

Fügen Sie diesen Skriptblock Ihrer Seite hinzu: -

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

Hoffe das hilft :-)

Ich habe nur an Danteunos Antwort herumgebastelt und festgestellt, dass sie zwar gut gemeint ist, aber leider in mehreren Browsern, die kein IE sind, kaputt ist . Dies liegt daran, dass der IE ziemlich streng ist, was er als Argument für den DateKonstruktor akzeptiert , andere jedoch nicht. Zum Beispiel gibt Chrome 18

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

Dies führt dazu, dass der Code den Pfad "Datumsvergleiche" verwendet und von dort aus alles bergab geht (z. B. new Date("11")größer als new Date("66")und dies ist offensichtlich das Gegenteil des gewünschten Effekts).

Daher habe ich nach Prüfung den Code geändert, um dem Pfad "Zahlen" Vorrang vor dem Pfad "Datumsangaben" zu geben und zu überprüfen, ob die Eingabe tatsächlich numerisch ist, und zwar mit der hervorragenden Methode, die in Validieren von Dezimalzahlen in JavaScript - IsNumeric () bereitgestellt wird .

Am Ende wird der Code:

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

Die Datumswerte aus den Textfeldern können mit der .val () -Methode von jquery wie abgerufen werden

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

Ich würde dringend empfehlen, die Datumszeichenfolgen vor dem Vergleich zu analysieren. Das Date-Objekt von Javascript verfügt über eine parse () - Methode, unterstützt jedoch nur US-Datumsformate (JJJJ / MM / TT). Es gibt die Millisekunden seit Beginn der Unix-Epoche zurück, sodass Sie Ihre Werte einfach mit> oder <vergleichen können.

Wenn Sie verschiedene Formate wünschen (z. B. ISO 8661), müssen Sie auf reguläre Ausdrücke oder die kostenlose Bibliothek date.js zurückgreifen.

Wenn Sie sehr benutzerfreundlich sein möchten, können Sie anstelle von Textfeldern jquery ui datepickers verwenden. Es gibt eine Datumsauswahlvariante, mit der Datumsbereiche eingegeben werden können:

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

Daher musste diese Regel optional sein, und keiner der oben genannten Vorschläge ist optional. Wenn ich die Methode aufrufe, wird sie nach Bedarf angezeigt, auch wenn ich einen Wert benötige.

Das ist mein Anruf:

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

Meine addMethodAntwort ist nicht so robust wie die von Mike E. am besten bewertete, aber ich verwende den JqueryUI-Datumsauswahlschalter, um eine Datumsauswahl zu erzwingen. Wenn mir jemand sagen kann, wie ich sicherstellen kann, dass die Daten Zahlen sind und die Methode optional ist, wäre das großartig, aber im Moment funktioniert diese Methode für mich:

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 verwenden die meisten Entwickler den From & To-Datumsvergleich als Zeichenfolge, ohne ihn in das Datumsformat zu konvertieren. Der einfachste Weg, vom Datum zu vergleichen, ist größer als bis heute.

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

Analysieren Sie immer vor und nach dem Vergleich, um genaue Ergebnisse zu erhalten

Ich mag, was Franz gesagt hat, weil ich es benutze: 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)
        }
    });
});

Oder besuchen Sie diesen 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'));
}

Hoffe das wird helfen :)

Zuerst teilen Sie die Werte von zwei Eingabefeldern mithilfe der Aufteilungsfunktion. dann das gleiche in umgekehrter Reihenfolge. nach concat nation parse es auf integer. Vergleichen Sie dann zwei Werte in der if-Anweisung. zB 1> 20-11-2018 2> 21-11-2018

Nach dem Aufteilen und Zusammenstellen neuer Werte für den Vergleich 20181120 und 20181121 werden die gleichen Werte danach verglichen.

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 {

}

das sollte funktionieren

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

Wenn das Format garantiert korrekt ist JJJJ / MM / TT und genau dasselbe zwischen den beiden Feldern, können Sie Folgendes verwenden:

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

Als Stringvergleich