Valide se a data de término é maior que a data de início com jQuery

Respostas:

177

Apenas expandindo a resposta das fusões. este método de extensão funciona usando o plugin de validação jQuery. Vai validar datas e números

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

Para usá-lo:

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

ou

$("form").validate({
    rules: {
        EndDate: { greaterThan: "#StartDate" }
    }
});
Mike E.
fonte
Como você usa isso com duas caixas de texto?
Cros
1
Tive que modificá-lo ligeiramente para permitir datas de término em branco em meu aplicativo, mas isso resolveu o problema. codeif (value == 0) {return true; } else if (! / Invalid | NaN / ...code
Frank Luke
3
Aviso de erro: eu sei que a pergunta é sobre datas, mas este código não funcionará para números conforme anunciado. Eu adicionei uma resposta explicando o porquê e o como, que também inclui a correção.
Jon
1
@Cros jQuery.validator.addMethod ("zip_code_checking", função (valor, elemento) {return jQuery ('# zip_endvalue'). Val ()> jQuery ('# zip_startvalue'). Val ()}, "* Fim do código postal o valor deve ser maior do que o valor inicial do CEP ");
Balasuresh Asaithambi de
Isso produz um erro no Google Chrome. Se você passar um valor menor que 12 ou maior que 31, ele acaba sendo analisado como uma data e, portanto, também é validado como uma data. Tive que separar isso em dois métodos (com pressa), mas adoraria encontrar uma solução mais adequada!
sbsatter
84
var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());

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

Isso deve bastar, eu acho

Shane O'Grady
fonte
Certo? Obrigado! Nenhum plugin é necessário. : P
Vael Victus
1
agradável e fácil de implementar, embora jQuery.validate seja incrível
mknopf
Muito obrigado .. tão fácil.
Nimit Joshi
o único problema é quando você tem um intervalo de datas de dois anos, por exemplo. 27-06-2015 a 02-02-2016 .... não será validado corretamente
Himansz
Esse intervalo de datas abrange dois anos, por exemplo. 27-06-2015 a 02-02-2016, está devidamente validado para mim.
Thamarai T
19

Um pouco tarde para a festa, mas aqui é a minha parte

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

Aqui está o detalhe:

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

Consulte jquery.validate.js e jquery-1.2.6.js. Adicione uma classe startDate à sua caixa de texto da data de início. Adicione uma classe endDate à sua caixa de texto de data de término.

Adicione este bloco de script à sua página: -

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

Espero que isto ajude :-)

Russell Giddings
fonte
eu gosto dessa técnica
wahmal
13

Eu estava apenas brincando com a resposta de danteuno e descobri que, embora seja bem-intencionado, infelizmente está quebrado em vários navegadores que não são o IE. Isso ocorre porque o IE será bastante rígido sobre o que aceita como argumento para o Dateconstrutor, mas outros não. Por exemplo, o Chrome 18 oferece

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

Isso faz com que o código tome o caminho de "comparar datas" e tudo desmorone a partir daí (por exemplo, new Date("11")é maior que new Date("66")e isso é obviamente o oposto do efeito desejado).

Portanto, após consideração, modifiquei o código para dar prioridade ao caminho "números" sobre o caminho "datas" e validar se a entrada é realmente numérica com o excelente método fornecido em Validar números decimais em JavaScript - IsNumeric () .

No final, o código se torna:

$.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
fonte
isso funciona no ie, mas não consigo fazê-lo funcionar na ópera e no FF, alguma ideia?
Codificado em
: Apresenta o erro de validação mesmo se a data de término selecionada for posterior à data de início selecionada
Codificado em
5

Os valores de data dos campos de texto podem ser obtidos pelo método jquery .val (), como

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

Eu recomendo fortemente que você analise as strings de data antes de compará-las. O objeto Date do Javascript tem um método parse () -, mas suporta apenas formatos de data dos EUA (AAAA / MM / DD). Ele retorna os milissegundos desde o início da época unix, então você pode simplesmente comparar seus valores com> ou <.

Se você quiser formatos diferentes (por exemplo, ISO 8661), você precisa recorrer a expressões regulares ou à biblioteca date.js gratuita.

Se você quiser ser super amigável ao usuário, pode usar jquery ui datepickers em vez de textfields. Existe uma variante do selecionador de data que permite inserir intervalos de datas:

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

Franz
fonte
5

Portanto, eu precisava que essa regra fosse opcional e nenhuma das sugestões acima é opcional. Se eu chamar o método, ele será exibido como necessário, mesmo se eu configurá-lo para precisar de um valor.

Esta é a minha chamada:

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

Minha addMethodresposta não é tão robusta quanto a de Mike E., mas estou usando o selecionador de data JqueryUI para forçar uma seleção de data. Se alguém puder me dizer como ter certeza de que as datas são números e ter o método opcional, isso seria ótimo, mas por enquanto este método funciona para mim:

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

Em javascript / jquery, a maioria do desenvolvedor usa comparação de datas De & Até, que é uma string, sem converter para o formato de data. A maneira mais simples de comparar a partir da data é maior do que a data atual.

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

Sempre analise desde e até a data antes da comparação para obter resultados precisos

Kunal Brahme
fonte
Isso não fornece uma resposta para a pergunta. Assim que tiver reputação suficiente, você poderá comentar sobre qualquer postagem ; em vez disso, forneça respostas que não exijam esclarecimentos do autor da pergunta . - Da avaliação
Mamun
É solução para questionar. Eu tentei e respondi.
Kunal Brahme
2

Gosto do que o Franz disse, porque é o que estou 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;
}
StefanNch
fonte
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)
        }
    });
});

Ou visite este link

flácido
fonte
2
jQuery('#from_date').on('change', function(){
    var date = $(this).val();
    jQuery('#to_date').datetimepicker({minDate: date});  
});
Atchyut Nagabhairava
fonte
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'));
}

Espero que isso ajude :)

Santosh Kori
fonte
0

Primeiro você divide os valores de duas caixas de entrada usando a função de divisão. em seguida, concate o mesmo na ordem inversa. após a concat nação, analise-o para um inteiro. em seguida, compare dois valores na instrução if. Ex. 1> 20-11-2018 2> 21-11-2018

após dividir e concatar novos valores para comparação 20181120 e 20181121 e depois comparar os mesmos.

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
fonte
Por favor, adicione a explicação desta solução
Jan Černý
0

isso deve funcionar

$.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
fonte
-2

Se houver garantia de que o formato está correto AAAA / MM / DD e exatamente o mesmo entre os dois campos, você pode usar:

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

Como uma comparação de string

Nadia Alramli
fonte
como faço para definir a data de início e a data de término no jquery?
entrada
Estou assumindo que são sequências regulares. Você os lê assim $ (# startdate: input) .val () e $ (# enddate: input) .val ()
Nadia Alramli