Question

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

$( "#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 plugin，如何添加规则以确保结束时间大于（但不等于）开始时间， if ，开始日期和结束日期是一样的吗？我甚至不知道从哪一个开始，目前有一个空白的脚本，所以任何帮助将不胜感激：

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

Answer 1

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

核心功能是：

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

DEMO：http://jsfiddle.net/dUe83/1/

这可能仍然存在错误....匆匆放在一起，并非意图成为完整的现成解决方案，而是作为一个重要的工作起点。

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

1 个答案: