Sprawdź, czy data zakończenia jest późniejsza niż data rozpoczęcia za pomocą jQuery

Jak sprawdzić / zweryfikować w jQuery, czy data zakończenia [pole tekstowe] jest późniejsza niż data rozpoczęcia [pole tekstowe]?

Po prostu rozszerzam odpowiedzi na fuzje. ta metoda rozszerzenia działa przy użyciu wtyczki jQuery validate. Sprawdza daty i liczby

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

Aby z niego skorzystać:

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

lub

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

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

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

Myślę, że to powinno wystarczyć

Trochę późno na imprezę, ale tu moja część

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

Oto szczegóły:

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

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

Odwołanie do jquery.validate.js i jquery-1.2.6.js. Dodaj klasę startDate do pola tekstowego daty rozpoczęcia. Dodaj klasę endDate do pola tekstowego daty zakończenia.

Dodaj ten blok skryptu do swojej strony: -

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

Mam nadzieję że to pomoże :-)

Właśnie majstrowałem przy odpowiedzi danteuno i odkryłem, że chociaż ma dobre intencje, niestety jest zepsuty w kilku przeglądarkach, które nie są IE. Dzieje się tak, ponieważ IE będzie dość surowe co do tego, co przyjmuje jako argument dla Datekonstruktora, ale inni nie. Na przykład Chrome 18 daje

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

To powoduje, że kod podąża ścieżką "porównania dat" i stamtąd wszystko idzie w dół (np. new Date("11")Jest większe niż new Date("66")i jest to oczywiście przeciwieństwo pożądanego efektu).

Dlatego po namyśle zmodyfikowałem kod, aby nadać priorytet ścieżce „liczb” nad ścieżką „dat” i potwierdzić, że dane wejściowe są rzeczywiście numeryczne, dzięki doskonałej metodzie przedstawionej w sekcji Waliduj liczby dziesiętne w JavaScript - IsNumeric () .

W końcu kod staje się:

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

Wartości dat z pól tekstowych można pobrać za pomocą metody .val () jquery, takiej jak

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

Zdecydowanie zalecamy przeanalizowanie ciągów dat przed ich porównaniem. Obiekt Date Javascript ma metodę parse (), ale obsługuje tylko formaty daty w USA (RRRR / MM / DD). Zwraca milisekundy od początku epoki unixa, więc możesz po prostu porównać swoje wartości z> lub <.

Jeśli potrzebujesz różnych formatów (np. ISO 8661), musisz skorzystać z wyrażeń regularnych lub bezpłatnej biblioteki date.js.

Jeśli chcesz być super przyjazny dla użytkownika, możesz użyć datepickers ui jquery zamiast pól tekstowych. Istnieje wariant DatePicker, który umożliwia wprowadzanie zakresów dat:

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

Dlatego potrzebowałem, aby ta reguła była opcjonalna i żadna z powyższych sugestii nie jest opcjonalna. Jeśli wywołuję metodę, jest ona wyświetlana jako wymagana, nawet jeśli ustawię ją na wymagającą wartości.

To jest moje wezwanie:

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

Moja addMethodnie jest tak solidna, jak najlepiej oceniana odpowiedź Mike'a E., ale używam selektora dat JqueryUI, aby wymusić wybór daty. Jeśli ktoś może mi powiedzieć, jak upewnić się, że daty są liczbami i mieć metodę opcjonalną, byłoby super, ale na razie ta metoda działa dla mnie:

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

W javascript / jquery większość programistów używa porównania dat od i do, które jest ciągiem znaków, bez konwersji na format daty. Najprostszym sposobem porównania od daty jest większa niż data.

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

Zawsze analizuj datę od i do daty przed porównaniem, aby uzyskać dokładne wyniki

Podoba mi się to, co powiedział Franz, bo tego używam: 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)
        }
    });
});

Lub odwiedź ten 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'));
}

Mam nadzieję, że to pomoże :)

Najpierw podziel wartości z dwóch pól wejściowych za pomocą funkcji podziału. następnie połącz to samo w odwrotnej kolejności. po konkatacji naród przeanalizuj go na liczbę całkowitą. następnie porównaj dwie wartości w instrukcji in if. np. 1> 20-11-2018 2> 21-11-2018

po podzieleniu i konkatacji nowych wartości do porównania 20181120 i 20181121, następne porównują to samo.

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 {

}

to powinno działać

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

Jeśli gwarantujemy, że format jest poprawny RRRR / MM / DD i dokładnie taki sam między dwoma polami, możesz użyć:

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

Jako porównanie ciągów