如果使用jQuery validate插件，开始/结束日期相等，请确保完成时间大于开始时间 [英] Ensure finish time is greater than start time if start/finish dates are equal using jQuery validate plugin

问题描述

我有4个字段-开始日期(使用jQuery datepicker的文本字段)，开始时间(下拉选择)，完成日期(使用jQuery datepicker的文本字段)和结束时间(下拉选择).

I've got 4 fields - start date (text field using jQuery datepicker), start time (dropdown select), finish date (text field using jQuery datepicker) and finish time (dropdown select).

<form id="my_form">

  <label for="start_date">Start Date</label>
  <input type="text" id="start_date" name="start_date" />

  <label for="start_time">Start Time</label>
  <select name="start_time" id="start_time">
    <option value="09:00" >09:00</option>
    <option value="09:30" >09:30</option>
    <option value="10:00" >10:00</option>
    <option value="10:30" >10:30</option>
    <option value="11:00" >11:00</option>
    <option value="11:30" >11:30</option>
    <option value="12:00" >12:00</option>
  </select>

  <label for="finish_date">Finish Date</label>
  <input type="text" id="finish_date" name="finish_date" />

  <label for="finish_time">Finish Time</label>
  <select name="finish_time" id="finish_time">
    <option value="09:00" >09:00</option>
    <option value="09:30" >09:30</option>
    <option value="10:00" >10:00</option>
    <option value="10:30" >10:30</option>
    <option value="11:00" >11:00</option>
    <option value="11:30" >11:30</option>
    <option value="12:00" >12:00</option>
  </select>

  <input type="submit" />

</form>

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

I'm using the standard jQuery Datepicker Widget functions to ensure that the end date is always the same or later than the start date:

$( "#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验证插件，如何添加一个确保结束时间大于(但不等于)开始时间的规则，如果，开始日期和结束日期是否相同?我什至不知道从哪里开始，现在有一个空白的脚本，所以任何帮助将不胜感激:

So my question is, using the jQuery validate plugin, how can I add a rule that ensures the end time is greater than (but not equal to) the start time, if, the start date and finish date are the same? I'm not even sure where to start on this one and have a blank script at the moment, so any help would be appreciated:

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

推荐答案

这是一个重要的工作开始.当日期/时间相等或开始小于结束时，您需要对要在哪个元素上设置错误的方式进行某些修改，或者如何显示错误.该插件有许多错误选项.

Here is a significant working start. It will require some modification as to which element(s) you want to set the error on when dates/times are equal or start is less than end, or how you want error to display. The plugin has many options for erorrs.

核心功能是:

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中使用:

This gets used in an addMethod to validator:

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

使用以下方法初始化验证器:

The validator is initialized using:

$('#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()中使用):

Helper plugin to parse the select tag values to a number ( used in 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....草率地组合在一起，并不是要作为一个完整的现成解决方案，而是作为一个重要的工作起点.

This may still have bugs....was hastily put together and not with intent of being a complete off the shelf solution but rather as a significant working starting point.

这篇关于如果使用jQuery validate插件，开始/结束日期相等，请确保完成时间大于开始时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！