引导日期选择器插件问题

Posted 2023-05-09

【中文标题】引导日期选择器插件问题

【英文标题】：bootstrap datepicker plugin issue

【发布时间】：2014-11-30 20:48:58

【问题描述】：

我使用了一个使用 Bootstrap 2 的模板。该模板具有 datepicker 插件和验证字段插件。

我需要从 datepicker 获取用户输入的日期，以便验证它。问题是它不是一次读取它，我必须点击两次才能做到这一点。因此，与验证插件的集成无法正常工作。它在我提到的第二次点击后验证...有什么问题？

html sn-p:

<div class="span6">
  <div class="control-group">
    <label class="control-label">V&aacute;lido Desde<span class="required">*</span></label>
      <div class="controls">
        <div class="input-icon left">
          <i class="icon-calendar"></i>
            <input class="m-wrap m-ctrl-medium date-picker" size="16" type="text" value="$okInfo['start_date']" placeholder="dd/mm/yyyy" id="start_date" name="start_date" data-date="" data-date-format="dd/mm/yyyy"/>
         </div>    
       </div>
     </div>
   </div>

然后我有一个来自插件 (sn-p) 的 js 文件：

if (jQuery().datepicker) 
  $('.date-picker').datepicker(
    rtl : App.isRTL(),
    autoclose: true,
  );

最后是验证文件：

var FormValidation = function () 

var handleValidation2 = function() 

var form2 = $('#form_sample_2');
var error2 = $('.alert-error', form2);
var success2 = $('#myModal', form2);

    form2.validate(
        errorElement: 'span', //default input error message container
        errorClass: 'help-inline', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        onfocusout: function (element) 
            $(element).valid();
        ,               
        rules: 
            start_date: 
                required: true,
                valid_date: true
            ,
        ,

【参考方案1】：

我认为这可能与 onfocusout 发生的验证调用有关。

jQueryUI 也将使用 onfocusout 日期更新文本框，所以从技术上讲，该框当时是空的，没有什么可以验证的？

尝试在验证中添加超时，有点像这样？ （未经测试！！）

onfocusout: function (element) 
    setTimeout(function(element)
        $(element).valid();
    ,1000);
,

代码应运行与之前相同的命令，但延迟 1 秒。

【讨论】：

嗨，感谢您的评论。我应该如何将此代码与我的代码集成？

只需将原始代码（如下所列）替换为我的代码即可。同样，这是未经测试的，如果您需要更多帮助，请告诉我。 onfocusout：函数（元素）$（元素）.valid（）； ,