使用 jQuery 验证结束日期是否大于开始日期答案

【问题标题】：Validate that end date is greater than start date with jQuery使用 jQuery 验证结束日期是否大于开始日期
【发布时间】：2010-10-24 10:56:33
【问题描述】：

如何在 jQuery 中检查/验证结束日期 [文本框] 是否大于开始日期 [文本框]？

【问题讨论】：

这里有解决办法：stackoverflow.com/questions/17169772/…

标签： jquery date jquery-validate

【解决方案1】：

只是扩展融合的答案。此扩展方法使用 jQuery 验证插件工作。它将验证日期和数字

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

使用它：

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

或

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

【讨论】：

这两个文本框如何使用？
我不得不稍微修改它以允许在我的应用程序中使用空白结束日期，但这确实很重要。 code if (value == 0) { return true; } else if (!/Invalid|NaN/... code
BUG 警告： 我确实意识到问题是关于日期的，但此代码不适用于广告中的数字。我添加了an answer，解释了原因和方法，其中还包括修复。
@Cros jQuery.validator.addMethod("zip_code_checking", function(value, element) { return jQuery('#zip_endvalue').val() > jQuery('#zip_startvalue').val( ) }, "* 邮政编码结束值应大于邮政编码开始值");
这会在 Google chrome 中产生错误。如果您传递一个小于 12 或大于 31 的值，它最终会被解析为一个日期，因此它也被验证为一个日期。我不得不把它分成两种方法（匆忙），但我很想找到一个更合适的解决方案！

【解决方案2】：

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

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

我认为应该这样做

【讨论】：

对吗？谢谢！不需要插件。 :P
不错且易于实现，尽管 jQuery.validate 很棒
非常感谢.. 这么简单。
唯一的问题是当你有一个跨越两年的日期范围时。 2015 年 6 月 27 日至 2016 年 2 月 2 日......它不会正确验证
这样的日期范围跨越两年，例如。 27-06-2015 到 02-02-2016，已为我正确验证。

【解决方案3】：

晚会有点晚了，但这是我的职责

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

详情如下：

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

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

【讨论】：

【解决方案4】：

参考 jquery.validate.js 和 jquery-1.2.6.js。将 startDate 类添加到您的开始日期文本框中。将 endDate 类添加到您的结束日期文本框。

将此脚本块添加到您的页面：-

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

希望这会有所帮助:-)

【讨论】：

我喜欢这种技术

【解决方案5】：

我只是在修改danteuno's answer，发现虽然是出于好意，但遗憾的是它在几个非 IE 浏览器上被破坏了。这是因为 IE 将非常严格地接受它作为 Date 构造函数的参数，但其他人不会。例如，Chrome 18 提供了

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

这会导致代码采用“比较日期”路径，并且从那里开始走下坡路（例如，new Date("11") 大于 new Date("66")，这显然与预期效果相反）。

因此，经过考虑，我修改了代码以优先于“日期”路径，并使用 Validate decimal numbers in JavaScript - IsNumeric() 中提供的出色方法验证输入确实是数字。

最后，代码变成：

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

【讨论】：

这在 ie 中有效，但在歌剧和 FF 中无法使用，有什么想法吗？
：即使选择的结束日期晚于选择的开始日期，也会出现验证错误

【解决方案6】：

所以我需要这条规则是可选的，以上建议都不是可选的。如果我调用它所显示的方法，即使我将它设置为需要一个值。

这是我的电话：

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

我的addMethod 不如 Mike E. 的最高评价答案强大，但我正在使用 JqueryUI 日期选择器来强制选择日期。如果有人能告诉我如何确保日期是数字并且方法是可选的，那就太好了，但现在这种方法对我有用：

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

【讨论】：

【解决方案7】：

文本字段中的日期值可以通过 jquery 的 .val() 方法获取，例如

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

我强烈建议在比较日期字符串之前对其进行解析。 Javascript 的 Date 对象有一个 parse()-Method，但它只支持美国日期格式 (YYYY/MM/DD)。它返回自 unix 纪元开始以来的毫秒数，因此您可以简单地将值与 > 或 <.> 进行比较

如果您想要不同的格式（例如 ISO 8661），您需要使用正则表达式或免费的 date.js 库。

如果你想成为超级用户，你可以使用 jquery ui datepickers 而不是 textfields。有一个允许输入日期范围的日期选择器变体：

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

【讨论】：

【解决方案8】：

在 javascript/jquery 中，大多数开发人员使用字符串形式的 From & To 日期比较，而不转换为日期格式。比较从日期开始的最简单方法是大于迄今为止的日期。

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

在比较之前总是解析从和到日期以获得准确的结果

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review
是问题的解答。我已经尝试并回答了。
Date.parse() 总是解析为 MM/DD/YYYY 格式尝试最佳解决方案。

【解决方案9】：

jQuery('#from_date').on('change', function(){
    var date = $(this).val();
    jQuery('#to_date').datetimepicker({minDate: date});  
});

【讨论】：

【解决方案10】：

我喜欢弗朗茨所说的，因为我正在使用：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;
}

【讨论】：

【解决方案11】：

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

或访问此link

【讨论】：

【解决方案12】：

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

希望这会有所帮助:)

【讨论】：

【解决方案13】：

首先使用 split 函数拆分两个输入框的值。然后以相反的顺序连接相同的内容。连接国家后将其解析为整数。然后比较 if 语句中的两个值。例如1>2018 年 20 月 11 日 2>2018 年 21 月 11 日

在拆分和连接新值后比较 20181120 和 20181121 之后比较相同。

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 {

}

【讨论】：

请添加此解决方案的说明

【解决方案14】：

这应该可以工作

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

【讨论】：

【解决方案15】：

你可以在两个不同的日期做这样的警报。

$('#end_date').on('change', function(){
             var startDate = $('#start_date').val();
             var endDate = $('#end_date').val();
             if (endDate < startDate){
                 alert('End date should be greater than Start date.');
                $('#end_date').val('');
             }
         });

您可以在日历上执行，它会自动禁用以前的日期。

$("#start_date").datepicker({
            dateFormat: 'dd/mm/yy',
            onSelect: function(date) {
                $("#end_date").datepicker('option', 'minDate', date);
            }
        });
$("#end_date").datepicker({ dateFormat: 'dd/mm/yy' });

【讨论】：

【解决方案16】：

如果格式保证是正确的 YYYY/MM/DD 并且两个字段之间完全相同，那么您可以使用：

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

作为字符串比较

【讨论】：

如何在 jquery 中定义 startdate 和 enddate？
我假设它们是常规字符串。您像这样阅读它们 $(#startdate:input).val() 和 $(#enddate:input).val()