如果使用jQuery validate插件启动/完成日期相同，则确保完成时间大于开始时间

我有4个字段 – 开始日期（使用jQuery datepicker的文本字段），开始时间（下拉选择），完成日期（使用jQuery datepicker的文本字段）和完成时间（下拉选择）。

 Start Date  Start Time  09:00 09:30 10:00 10:30 11:00 11:30 12:00  Finish Date  Finish Time  09:00 09:30 10:00 10:30 11:00 11:30 12:00    

我正在使用标准的jQuery Datepicker Widget函数来确保结束日期始终与开始日期相同或晚于：

 $( "#start_date" ).datepicker({ dateFormat: 'dd/mm/y', minDate: new Date(), onClose: function( selectedDate ) { $( "#finish_date" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#finish_date" ).datepicker({ dateFormat: 'dd/mm/y', minDate: new Date(), onClose: function( selectedDate ) { $( "#start_date" ).datepicker( "option", "maxDate", selectedDate ); } }); 

所以我的问题是，使用jQuery validate插件 ，我如何添加一个规则，确保结束时间大于（但不等于）开始时间， 如果开始日期和结束日期相同？ 我甚至不确定从哪里开始并且目前有一个空白的脚本，所以任何帮助将不胜感激：

 $("#my_form").validate({ rules: { start_time: { } } }); 

Answer 1

这是一个重要的工作开始。 当日期/时间相等或者开始小于结束时，或者您希望如何显示错误时，需要对要设置错误的元素进行一些修改。 该插件有许多选项供erorrs使用。

核心function是：

 function compareDates() { var startDate = $("#start_date").datepicker('getDate'); var endDate = $("#finish_date").datepicker('getDate'); if( !startDate || !endDate){ return false; } if(endDate > startDate) { return true; } else { var endTime = endDate.getTime() + $('#finish_time').parseValToNumber(); var startTime = startDate.getTime() + $('#start_time').parseValToNumber(); return endTime > startTime; } } 

这在addMethod用于validation器：

 jQuery.validator.addMethod("checkDates", function(value, element) { /* see function above*/ return compareDates() ; }, "End date/time must be after start"); 

使用以下方法初始化validation器：

 $('#my_form').validate({ rules:{ start_date:'required', /* arbitrarily used this element for "checkDates" rule*/ finish_date:{required:true,checkDates:true}, finish_time:'required', start_time:'required' } }); 

Helper插件将select标记值解析为数字（在compareDates() ）：

 /* change the select value to an integer to add to unix time of date from datepicker*/ $.fn.parseValToNumber = function() { return parseInt($(this).val().replace(':',''), 10) || 0; } 

演示： http ： //jsfiddle.net/dUe83/1/

这可能仍然有bug ….匆忙放在一起，并不是为了成为一个完整的现成解决方案，而是作为一个重要的工作起点。