web-dev-qa-db-de.com

Bestätigen Sie, dass das Enddatum mit jQuery größer als das Startdatum ist

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

94
input

Nur Fusionen Antwort ausdehnen. Diese Erweiterungsmethode funktioniert mit dem jQuery-Validate-Plugin. Daten und Zahlen werden überprüft

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" }
    }
});
163
Mike E.
var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());

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

Das sollte es tun, denke ich

78
Shane O'Grady

Etwas zu 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");
}
18
Kamran Ahmed

Referenzieren Sie jquery.validate.js und jquery-1.2.6.js . Fügen Sie Ihrem Startdatum-Textfeld eine startDate-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 :-)

14

Ich habe gerade an der Antwort von danteuno gearbeitet und fand heraus, dass es zwar gut gemeint ist, aber leider auf mehreren Browsern, die nicht IE sind, kaputt ist. Dies liegt daran, dass IE das, was er als Argument für den Date-Konstruktor akzeptiert, sehr streng sein wird, 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 "Datenvergleich" verwendet, und von dort geht es abwärts (z. B. ist new Date("11") größer als new Date("66") und dies ist offensichtlich das Gegenteil des gewünschten Effekts).

Nach einer Überlegung habe ich daher den Code geändert, um dem "Zahlen" -Pfad Vorrang vor dem "Datums" -Pfad zu geben und zu bestätigen, dass die Eingabe tatsächlich numerisch ist, mit der ausgezeichneten Methode, die in Validiere Dezimalzahlen in JavaScript - IsNumeric () angegeben ist.

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

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

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

Ich würde dringend empfehlen, die Datumsfolgen zu analysieren, bevor Sie sie vergleichen. Das Date-Objekt von Javascript hat 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 andere Formate wünschen (z. B. ISO 8661), müssen Sie auf reguläre Ausdrücke oder die freie date.js-Bibliothek zurückgreifen. 

Wenn Sie sehr benutzerfreundlich sein möchten, können Sie statt Textfeldern jquery ui datepicker verwenden. Es gibt eine Datepicker-Variante, mit der Datumsbereiche eingegeben werden können:

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

5
Franz

Ich brauchte also diese Regel, um optional zu sein, und keiner der obigen Vorschläge ist optional. Wenn ich die Methode aufrufe, wird sie nach Bedarf angezeigt, auch wenn für sie ein Wert festgelegt wurde.

Das ist mein Anruf:

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

Meine addMethod ist nicht so robust wie die von Mike E. am besten bewertete Antwort, aber ich benutze das JqueryUI-Datumsauswahlfeld, um eine Datumsauswahl zu erzwingen. Wenn mir jemand sagen kann, wie man sicherstellt, dass es sich bei den Datumsangaben um Zahlen handelt, und dass die Methode optional sein kann, wäre das toll, aber für mich 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.');
4
Charity
jQuery('#from_date').on('change', function(){
    var date = $(this).val();
    jQuery('#to_date').datetimepicker({minDate: date});  
});

In javascript/jquery verwenden die meisten Entwickler From & To-Datumsvergleiche, die aus Zeichenfolgen bestehen, ohne in Datumsformate konvertiert zu werden. Die einfachste Methode, von Datum aus zu vergleichen, ist größer als bisher.

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

Analysieren Sie vor dem Vergleich immer von und bis zu diesem Datum, um genaue Ergebnisse zu erhalten 

2
Kunal Brahme
$(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

2
saggy

Mir gefällt, was Franz gesagt hat, denn ich verwende: 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;
}
2
StefanNch
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 :)

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

0
Bagaskara

Zuerst teilen Sie die Werte von zwei Eingabefeldern mit der Aufteilungsfunktion ., Dann die gleichen in umgekehrter Reihenfolge . Nach der Konkation, analysieren Sie sie mit Integer . Vergleichen Sie dann zwei Werte in der if-Anweisung . zB.1> 20-11-2018 2> 21-11-2018

nach dem Aufteilen und Vergleich neuer Werte für den Vergleich 20181120 und 20181121 vergleichen Sie danach die gleichen. 

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 {

}
0
Suraj Khot