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

Question

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

Answer 1

只是扩大融合答案.这个扩展方法使用jQuery validate插件.它将验证日期和数字

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

Answer 2

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

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

我认为应该这样做

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

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>

希望这可以帮助 :-)

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

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

Answer 7

来自文本字段的日期值可以通过jquery的.val()方法来获取

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

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

如果您需要不同的格式(例如ISO 8661),则需要使用正则表达式或免费的date.js库.

如果你想成为超级用户友好的,你可以使用jquery ui datepickers而不是textfields.有一个datepicker变体,允许输入日期范围:

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