0

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

<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 函数来确保结束日期始终与开始日期相同或晚于开始日期：

$( "#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 验证插件，我如何添加一个规则来确保结束时间大于（但不等于）开始时间，如果开始日期和结束日期相同？我什至不确定从哪里开始，目前有一个空白脚本，所以任何帮助将不胜感激：

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

1 回答 1

2

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

核心功能是：

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验证器：

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

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

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

帮助插件将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/

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

于 2012-12-16T04:29:21.093 回答