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

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

407142 次浏览
小开

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

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

As a string comparison

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


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

That should do it I think

小开

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

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

I'd strongly recommend to parse the date strings before comparing them. Javascript's Date object has a parse()-Method, but it only supports US date formats (YYYY/MM/DD). It returns the milliseconds since the beginning of the unix epoch, so you can simply compare your values with > or <.

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

If you want to be super user-fiendly, you can use jquery ui datepickers instead of textfields. There is a datepicker variant that allows to enter date ranges:

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

小开

引用 jquery.validate.js 和 jquery-1.2.6. js。 将 startDate 类添加到开始日期文本框中。 Add an endDate class to your end date textbox.

将此脚本块添加到页面:-

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

Hope this helps :-)

小开
最佳答案

这个扩展方法使用 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" }
}
});
小开

我喜欢弗朗茨说的，因为我用的是: 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;
}
小开

我只是在修补 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")，这显然与所期望的效果相反)。

因此，在考虑之后，我修改了代码，使“ number”路径优先于“ date”路径，并使用 在 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}.');
小开 
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'));
}

Hope this will help :)

小开

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

这是我的决定:

  $("#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.');
小开

有点晚了，但这是我的角色

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

在 javascript/jquery 中，大多数开发人员使用 From & To date 比较，它是字符串，不需要转换成日期格式。 从日期进行比较的最简单方法比从日期进行比较的方法要大。

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

Always parse from and to date before comparison to get accurate results

小开

首先使用拆分函数将两个输入框的值拆分。 然后按相反的顺序连接。 after concat nation parse it to integer. 然后在 if 语句中比较两个值。 例如: 1 > 20-11-20182 > 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 {


}
小开

这应该能行

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

小开

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

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

either you can perform on calendar it will automatically disable previous dates.

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

提交答案