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

Odpowiedzi:

177

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" }
    }
});
Mike E.
źródło
Jak tego używać z dwoma polami tekstowymi?
Cros
1
Musiałem go nieco zmodyfikować, aby umożliwić puste daty końcowe w mojej aplikacji, ale to zrobiło masę. codeif (wartość == 0) {return true; } else if (! / Invalid | NaN / ...code
Frank Luke
3
Ostrzeżenie o błędzie: zdaję sobie sprawę, że pytanie dotyczy dat, ale ten kod nie będzie działał dla liczb, jak w reklamie. Dodałem odpowiedź wyjaśniającą dlaczego i jak, która obejmuje również poprawkę.
Jon
1
@Cros jQuery.validator.addMethod ("zip_code_checking", function (value, element) {return jQuery ('# zip_endvalue'). Val ()> jQuery ('# zip_startvalue'). Val ()}, "* Koniec kodu pocztowego wartość powinna być większa niż wartość początkowa kodu pocztowego ");
Balasuresh Asaithambi
Powoduje to błąd w Google Chrome. Jeśli przekażesz wartość mniejszą niż 12 lub większą niż 31, zostanie ona przeanalizowana jako data, a zatem zostanie również zweryfikowana jako data. Musiałem podzielić to na dwie metody (w pośpiechu), ale chciałbym znaleźć bardziej odpowiednie rozwiązanie!
sbsatter
84
var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());

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

Myślę, że to powinno wystarczyć

Shane O'Grady
źródło
Dobrze? Dzięki! Nie potrzeba żadnej wtyczki. : P
Vael Victus
1
ładne i łatwe do zaimplementowania, chociaż jQuery.validate jest niesamowite
mknopf
Wielkie dzięki ... takie proste.
Nimit Joshi
jedynym problemem jest sytuacja, gdy masz zakres dat obejmujący dwa lata, np. 27-06-2015 do 02-02-2016 .... nie zostanie poprawnie zweryfikowany
Himansz
Taki zakres dat obejmujący dwa lata np. 27-06-2015 do 02-02-2016, jest dla mnie poprawnie zweryfikowany.
Thamarai T
19

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");
}
Kamran Ahmed
źródło
14

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

Russell Giddings
źródło
Podoba mi się ta technika
wahmal
13

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}.');
Jon
źródło
to działa, tj. ale nie mogę sprawić, by działało w operze i FF, jakieś pomysły?
Kodowane
: Występuje z błędem walidacji, nawet jeśli wybrana data zakończenia jest
późniejsza
5

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/

Franz
źródło
5

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.');
Dobroczynność
źródło
4

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

Kunal Brahme
źródło
To nie daje odpowiedzi na pytanie. Gdy zdobędziesz wystarczającą reputację , będziesz mógł komentować każdy post ; zamiast tego udziel odpowiedzi, które nie wymagają wyjaśnień od pytającego . - Z recenzji
Mamun
To rozwiązanie na pytania. Próbowałem i odpowiedziałem.
Kunal Brahme
2

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;
}
StefanNch
źródło
2
$(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

obwisłe
źródło
2
jQuery('#from_date').on('change', function(){
    var date = $(this).val();
    jQuery('#to_date').datetimepicker({minDate: date});  
});
Atchyut Nagabhairava
źródło
1
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 :)

Santosh Kori
źródło
0

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 {

}
Suraj Khot
źródło
Proszę dodać wyjaśnienie tego rozwiązania
Jan Černý
0

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

Bagaskara
źródło
-2

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

Nadia Alramli
źródło
jak zdefiniować datę początkową i datę końcową w jQuery?
wejście
Zakładam, że to zwykłe struny. Czytasz je w ten sposób $ (# startdate: input) .val () i $ (# enddate: input) .val ()
Nadia Alramli