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

Question

如何使用jQuery检查/验证结束日期[textbox]是否大于开始日期[textbox]？

- input

---

这里有一个解决方案：https://dev59.com/RGQn5IYBdhLWcg3wAjPJ - Adrian P.

Answer 1

在 Fusion 的回答上进行扩展。这个扩展方法使用了 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" }
    }
});

- Mike E.

---

你如何在两个文本框中使用它？ - Cros

我不得不稍微修改它以允许在我的应用程序中使用空白结束日期，但这做了大部分工作。 code 如果（value == 0）{ 返回真; } else if (!/Invalid|NaN/... code - Frank Luke

BUG警告： 我知道这个问题是关于日期的，但是这段代码并不能像它所宣传的那样适用于数字。我添加了一个答案，详细说明了为什么会出现这种情况和如何解决它。 - Jon

@Cros jQuery.validator.addMethod("zip_code_checking", function(value, element) { return jQuery('#zip_endvalue').val() > jQuery('#zip_startvalue').val() }, "* 邮政编码结束值应大于邮政编码起始值"); - Balasuresh Asaithambi

这会在Google Chrome中产生错误。 如果传递的值小于12或大于31，则会被解析为日期，并因此被验证为日期。 我不得不将其分成两种方法（匆忙中），但我很想找到更合适的解决方案！ - sbsatter

Answer 2

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

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

我想那应该可以解决问题。

- Shane O'Grady

---

对吧？谢谢！不需要插件。:P - Vael Victus

简单易实现，尽管jQuery.validate非常棒。 - mknopf

非常感谢，太容易了。 - Nimit Joshi

唯一的问题是当你有一个跨越两年的日期范围，例如2015年6月27日至2016年2月2日时...它无法正确验证。 - Himansz

这样跨越两年的日期范围，例如2015年6月27日至2016年2月2日，对我进行了适当的验证。 - Thamarai T

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

- Kamran Ahmed

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

希望这可以帮到你 :-)

- Russell Giddings

---

我喜欢这个技术。 - wahmal

Answer 5

我只是在尝试 danteuno 的回答，然后发现虽然它的初衷是好的，但遗憾的是，在一些非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")，这显然是相反于预期的效果）。

因此，在考虑后，我修改了代码，优先处理“数字”路径而非“日期”路径，并使用在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}.');

- Jon

---

这在IE上可以运行，但无法在Opera和FF上运行，有什么想法吗？ - Codded

即使选择的结束日期在所选的开始日期之后，它仍会出现验证错误。 - Codded

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

- Charity

Answer 7

可以使用jQuery的.val()方法获取文本字段中的日期值，例如：

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

我强烈建议在比较日期字符串之前对其进行解析。JavaScript的Date对象具有parse（）方法，但它仅支持美国日期格式（YYYY/MM/DD）。它返回自Unix纪元开始以来的毫秒数，因此您可以使用>或<简单比较您的值。

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

如果您想要超级用户友好的界面，则可以使用jquery ui日期选择器而不是文本字段。有一种日期选择器变体可允许输入日期范围：

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

- Franz

Answer 8

在JavaScript/jQuery中，大多数开发人员使用字符串的From和To日期比较，而不将其转换为日期格式。比较from日期大于to日期的最简单方法是：

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

始终在比较之前解析起始日期和结束日期以获得准确的结果。

- KBC

---

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Mamun

这是问题的解决方案。我已经尝试并回答了。 - KBC

Date.parse() 总是解析为 MM/DD/YYYY 格式，请尽力找到最佳解决方案。 - fahdshaykh

Answer 9

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

Or Visit to this link

- saggy

Answer 10

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

- Atchyut Nagabhairava