使用daterangepicker时时间选择器校验始终返回false问题

你遇到的核心问题是jQuery Validate默认的time校验规则只支持24小时制格式（如HH:mm），但你的daterangepicker配置的是12小时制带AM/PM的格式（hh:mm A），所以校验会直接判定输入无效，抛出那个提示。

下面是具体的解决步骤：

1. 自定义12小时制时间校验规则 #

我们需要给jQuery Validate添加一个自定义校验方法，专门匹配hh:mm A格式的时间：

// 自定义12小时制时间校验规则
$.validator.addMethod("time12h", function(value, element) {
  // 匹配hh:mm AM/PM的正则（支持1-12小时，00-59分钟，不区分大小写的AM/PM）
  var timePattern = /^(0?[1-9]|1[012]):[0-5][0-9] (AM|PM)$/i;
  // 允许空值（如果字段非必填的话），否则验证格式
  return this.optional(element) || timePattern.test(value);
}, "Please enter a valid time, between 12:00 AM and 11:59 PM");

这个规则会验证：

• 小时部分为1-12（支持带前导0，比如08或8）
• 分钟部分为00-59
• 结尾必须带AM或PM（不区分大小写）

2. 给时间输入框应用自定义规则 #

修改你的校验配置，给带有.time类的输入框指定使用我们自定义的time12h规则，替代默认的time规则：

方式1：针对单个输入框（已知name属性） #

var $validationForm = $('#smartwizard');
$validationForm.validate({
  errorPlacement: function errorPlacement(error, element) {
    $(element).parents('.form-group').append( error.addClass('invalid-feedback small d-block') )
  },
  highlight: function(element) {
    $(element).addClass('is-invalid');
  },
  unhighlight: function(element) {
    $(element).removeClass('is-invalid');
  },
  // 添加规则配置
  rules: {
    // 替换成你实际的时间输入框name属性值
    yourTimeInputName: {
      required: true, // 如果字段必填的话
      time12h: true
    }
  },
  messages: {
    yourTimeInputName: {
      required: "Please enter a time",
      time12h: "Please enter a valid time, between 12:00 AM and 11:59 PM"
    }
  }
});

方式2：批量给所有.time类输入框添加规则 #

如果你的时间输入框是动态生成的，或者有多个，用这种方式更方便：

// 页面加载完成后，给所有.time输入框添加规则
$(function() {
  $('.time').each(function() {
    $(this).rules("add", {
      time12h: true,
      messages: {
        time12h: "Please enter a valid time, between 12:00 AM and 11:59 PM"
      }
    });
  });
});

3. 保留原有的daterangepicker配置 #

你的daterangepicker配置完全正确，不需要修改，它会继续生成符合要求的hh:mm A格式时间：

$(document).on('focus','.time',function(){
  $(this).daterangepicker({
    timePicker : true,
    singleDatePicker:true,
    timePickerIncrement : 1,
    timePicker24Hour:false,
    timePickerSeconds : false,
    locale : {
      format : 'hh:mm A',
    }
  }).on('show.daterangepicker', function(ev, picker) {
    picker.container.find(".calendar-table").hide();
  });
});

为什么原校验不生效？ #

jQuery Validate默认的time规则基于正则/^([01]\d|2[0-3]):?([0-5]\d)$/，这个正则只匹配00:00到23:59的24小时制时间，完全不识别AM/PM标识，所以你的12小时制时间会被判定为无效。

内容的提问来源于stack exchange，提问作者Vipin Choubey