Validar essa data final é maior que data de início com jQuery
-
08-07-2019 - |
Pergunta
Como posso verificar / validar em jQuery se data final [caixa de texto] é maior do que data de início [caixa de texto]?
Solução
Apenas expansão off fusões resposta. este método de extensão funciona usando o jQuery validar plugin. Ele irá 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" }
}
});
Outras dicas
var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());
if (startDate < endDate){
// Do something
}
Isso deve fazê-lo eu acho
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");
}
jquery.validate.js Referência e jQuery-1.2.6.js. Adicionar uma classe startDate da data de início caixa de texto. Adicionar uma classe endDate à sua data final caixa de texto.
Adicione este bloco script para 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 isso ajude: -)
Eu estava apenas mexer com de danteuno resposta e constatou que, embora bem intencionada, infelizmente, está quebrado em vários navegadores que são não IE. Isso ocorre porque o IE será bastante rigoroso sobre o que aceita como argumento para o construtor Date
, mas outros não. Por exemplo, o Chrome 18 dá
> new Date("66")
Sat Jan 01 1966 00:00:00 GMT+0200 (GTB Standard Time)
Isso faz com que o código para tomar o caminho "comparar datas" e tudo vai por água abaixo (por exemplo new Date("11")
é maior do que new Date("66")
e este é, obviamente, o oposto do efeito desejado).
Logo após consideração que eu modificado o código de dar prioridade ao caminho "números" sobre o caminho "datas" e validar que a entrada é de fato numérico com o excelente método fornecido em números decimais Validar em JavaScript -. IsNumeric ()
No final, o código torna-se:
$.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}.');
Os valores de data a partir dos campos de texto pode ser obtida por .val do jQuery () Método como
var datestr1 = $('#datefield1-id').val();
var datestr2 = $('#datefield2-id').val();
Eu recomendo fortemente para analisar os textos de data antes de compará-los. objeto Date do JavaScript tem um parse () - método, mas ele só suporta 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 diferentes formatos (por exemplo, ISO 8661), você precisa de recorrer a expressões regulares ou a biblioteca date.js livre.
Se você quer ser super user-fiendly, você pode usar jQuery datepickers ui em vez de campos de texto. Existe uma variante datepicker que permite introduzir intervalos de datas:
http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/
Então eu precisava esta regra a ser opcional e nenhuma das sugestões acima são opcionais. Se eu chamar o método ele está mostrando como necessário, mesmo que eu defini-lo para a necessidade de um valor.
Esta é a minha chamada:
$("#my_form").validate({
rules: {
"end_date": {
required: function(element) {return ($("#end_date").val()!="");},
greaterStart: "#start_date"
}
}
});//validate()
Meu addMethod
não é tão robusto como top de Mike E. resposta nominal, mas eu estou usando o datepicker jQueryUI para forçar uma seleção de data. Se alguém pode me dizer como se certificar que as datas são números e ter o método seja opcional que seria ótimo, mas por agora 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.');
Eu gosto do que Franz disse, porque é o que eu 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;
}
$(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)
}
});
});
jQuery('#from_date').on('change', function(){
var date = $(this).val();
jQuery('#to_date').datetimepicker({minDate: date});
});
Em javascript / jquery a maioria dos usos Desenvolvedor de & Para comparação data que é corda, sem converter para o formato de data. A maneira mais simples para comparar a partir da data é maior, em seguida, até à data é.
Date.parse(fromDate) > Date.parse(toDate)
Sempre analisar de e para data anterior a comparação para obter resultados precisos
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'));
}
Esperamos que isto ajude:)
Primeiro você dividir os valores da caixa de entrada de dois usando a função de divisão. em seguida, o mesmo concat em ordem inversa. após concat nação analisá-lo para inteiro. em seguida, comparar dois valores em em if. eg.1> 20-11-2018 2> 21-11-2018
depois de dividida e novos valores concat para comparação 20181120 e 20181121 a depois que comparar o mesmo.
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 {
}
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");
Se o formato é garantida para ser correta AAAA / MM / DD e exatamente o mesmo entre os dois campos, em seguida, você pode usar:
if (startdate > enddate) {
alert('error'
}
Como uma comparação de string