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

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

09:00 09:30 10:00 10:30 11:00 11:30 12:00 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: { } } }); 

    这是一个重要的工作开始。 当日期/时间相等或者开始小于结束时,或者您希望如何显示错误时,需要对要设置错误的元素进行一些修改。 该插件有许多选项供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 ….匆忙放在一起,并不是为了成为一个完整的现成解决方案,而是作为一个重要的工作起点。

      以上就是jQuery教程分享如果使用jQuery validate插件启动/完成日期相同,则确保完成时间大于开始时间相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注(计算机技术网)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请点击右边联系管理员删除。

      如若转载,请注明出处:https://www.ctvol.com/jquerytutorial/541545.html

      (0)
      上一篇 2021年1月4日
      下一篇 2021年1月4日

      精彩推荐