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


Answers:


177

只是扩展融合答案。此扩展方法可使用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" }
    }
});

如何在两个文本框中使用它?
Cros 2010年

1
我必须对其稍加修改,以允许在应用程序中保留空白的结束日期,但是这样做确实很麻烦。codeif(value == 0){返回true; } else if(!/ Invalid | NaN / ...code
Frank Luke

3
错误的警告:我确实意识到问题在于日期,但是此代码不适用于所宣传的数字。我添加了一个答案,解释了为什么以及如何修复。
2012年

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

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

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

我认为应该这样做


对?谢谢!无需插件。:P
Vael Victus

1
很好并且易于实现,尽管jQuery.validate很棒
mknopf

非常感谢..如此简单。
Nimit Joshi 2015年

唯一的问题是,当您的日期范围跨越两年时,例如。
2015

这样的日期范围跨越两年之内。2015年6月27日至2016年2月2日,已为我正确验证。
Thamarai T

19

聚会晚了一点,但是这是我的职责

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

14

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

希望这可以帮助 :-)


我喜欢这项技术
wahmal

13

我只是对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}.');

这适用于ie,但无法使其在歌剧和FF中工作,有什么想法吗?
2012年

:它配备了即使所选结束日期的选定开始起验证错误
Codded

5

可以通过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代替文本字段。有一个datepicker变体,可以输入日期范围:

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


5

因此,我需要此规则是可选的,上述建议都不是可选的。如果我调用该方法,即使将其设置为需要一个值,它也会根据需要显示。

这是我的电话:

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

addMethod的答案不如Mike E.的最高评价答案强,但我正在使用JqueryUI datepicker强制选择日期。如果有人可以告诉我如何确保日期是数字,并且该方法是可选的,那将是很好的选择,但是现在此方法对我有用:

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

4

在javascript / jquery中,大多数开发人员都使用From&To date比较(字符串形式),而不转换为日期格式。从日期进行比较的最简单方法是大于日期。

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

在进行比较之前,请始终先后解析并获取准确的结果


这不能为问题提供答案。一旦您拥有足够的声誉,您就可以在任何帖子中发表评论;相反,请提供不需要问询者澄清的答案。- 来自评论
Mamun

是问题的解决方案。我已经尝试并回答了。
库纳尔·布拉姆

2

我喜欢Franz所说的,因为我正在使用: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;
}

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

或访问此链接


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

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

希望这会有所帮助:)


0

首先,使用拆分功能拆分两个输入框的值。然后以相反的顺序连接。在concat国家将其解析为整数之后。然后在if语句中比较两个值。例如:1> 20-11-2018 2> 21-11-2018

在拆分并合并比较值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 {

}

请加入这个解决方案的解释
扬CERNY

0

这应该工作

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


-2

如果保证格式正确YYYY / MM / DD,并且两个字段之间的格式完全相同,则可以使用:

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

作为字符串比较


如何在jquery中定义开始日期和结束日期?
输入

我假设它们是常规字符串。您像这样阅读它们$(#startdate:input).val()和$(#enddate:input).val()
Nadia Alramli 09年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.