引导日期选择器和引导验证器

Posted 2023-05-09

【中文标题】引导日期选择器和引导验证器

【英文标题】：Bootstrap datepicker and bootstrap validator

【发布时间】：2014-10-21 14:52:03

【问题描述】：

我正在使用来自here 的引导日期选择器和来自here 的引导验证器。我也在使用引导程序 v3.1.1。

从日期选择器中选择日期后，验证器没有反应。它只在我使用键盘输入日期时起作用。

这是我的 html 代码：

<form id="myForm" method="POST"> 
   <div class="col-lg-3">
     <div class="form-group">
        <input name="endDate" type="text" class="datepicker form-control">
     </div>
   </div>
</form>

在我添加的 .js 文件中：

$(document).ready(function () 
  $('.datepicker').datepicker();
);

对于验证者：

$(document).ready(function () 
    $('#myForm').bootstrapValidator(
        feedbackIcons: 
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        ,
        fields: 
            endDate: 
                validators: 
                    date: 
                        format: 'DD/MM/YYYY',
                        message: 'The format is dd/mm/yyyy'
                    ,
                    notEmpty: 
                        message: 'The field can not be empty'
                    
                
            
        
    );
);

【问题讨论】：

您能告诉我们您使用的是哪两个插件吗？验证器很容易猜到，但如果您提到这两个插件，它将对您的帖子有所帮助。

对于验证，我使用 bootstrapValidator.min.js 版本 v0.5.0，构建于 2014-07-14，对于 datepicker，我使用 bootstrap-datepicker.js 版本 3.1.1，我使用 jquery 1.10.2 .

我的意思是提供插件页面的链接。例如。验证您是否使用此bootstrapvalidator.com？对于日期选择器，您是否使用此 vitalets.github.io/bootstrap-datepicker？

是的，我使用您提到的两个链接中的日期选择器和验证器。我使用来自eonasdan.github.io/bootstrap-datetimepicker 的日期时间选择器，我遇到了同样的问题。感谢您的回答。

【参考方案1】：

将 BootstrapValidator 与 Bootstrap-datetimepicker 或 Bootstrap-datepicker 一起使用时，您应该重新验证日期字段。

所以你应该添加这个：

1) 与 bootstrap-datetimepicker 一起使用：

$('.date')
    .on('dp.change dp.show', function(e) 
        // Revalidate the date when user change it
        $('#myForm').bootstrapValidator('revalidateField', 'endDate');
);

2) 与 bootstrap-datepicker 一起使用：

$('.datepicker')
    .on('changeDate show', function(e) 
        // Revalidate the date when user change it
        $('#myForm').bootstrapValidator('revalidateField', 'endDate');
);

请参阅datetimepicker example 了解更多信息。

【讨论】：

我有一个问题，data.bv.isValid() 总是false

@YouYou 请创建一个新问题或在github.com/nghuuphuoc/bootstrapvalidator/issues/new的适当存储库上创建一个问题

【参考方案2】：

不知何故，在选择日期后，datepicker() 失去了日期字段的焦点，并且没有一个验证器插件可以看到日期输入字段已填充（有效）。 总而言之，一个简单的 .focus() 就可以了。

$('#datefield').datepicker(
  //datepicker methods and settings here
).on('changeDate', function (e) 
  $(this).focus();    
);

【讨论】：

男孩，你简单而聪明的解决方案救了我一个严重的心脏烧伤病例！非常感谢！ :)

其实我说得太早了。添加 .focus() 似乎可以解决问题，但实际上并没有解决 - 无效类已被删除，但验证插件仍然认为该字段无效！

@RogerDodger，您使用的是哪个验证器插件？

jqueryvalidation.org 上的那个 - 修复它的是@Sparky 在另一个 SO 线程上提供的解决方案，而不是 $(this).focus() ，我使用了 $(this).valid( )。成功了。

【参考方案3】：

以上接受的答案对我不起作用。对我有用的方法非常简单。

$('#datefield').datepicker().on('changeDate', function (e) 
         $('#datefield').focus();
         $('#anyotherfield').focus();
         $('#datefield').focus();             
);

希望这会有所帮助！

【参考方案4】：

对于大多数情况，上述答案应该有效，但如果最终这些答案对您不起作用，也可以试试这个：

$('.datepicker').change(function () 
        $(this).focus();
        $(this).blur();
    );

此脚本的主要思想是通过“设置”和“取消设置”焦点后强制验证。我知道这类似于模拟允许运行验证的正常事件。

祝你好运！

【参考方案5】：

  $('[name="StartDate"]').datepicker(
            weekStart: 1,
            autoclose: true,
            todayHighlight: true
        ).on('changeDate', function (selected) 

            if ($('[name="StartDate"]').val() == '' || typeof 
    $('[name="StartDate"]').val() == "undefined")                 
                $('[name="EndDate"]').val('').datepicker('setStartDate', null);                
            
            else 
                $('[name="EndDate"]').val('').datepicker('setDate', new Date());
                $('[name="EndDate"]').datepicker('setStartDate', null);
                startDate = new Date(selected.date.valueOf());
                startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
                $('[name="EndDate"]').datepicker('setDate', startDate);
                $('[name="EndDate"]').datepicker('setStartDate', startDate);
                $('[name="EndDate"]').val('').datepicker('update', '');
            
        );

        $('[name="StartDate"]').blur(function (selected) 
            if ($('[name="EndDate"]').val() != '' && $('[name="StartDate"]').val() == '' || typeof $('[name="StartDate"]').val() == "undefined")                 
                $('[name="StartDate"]').datepicker('setDate', new Date());
                $('[name="StartDate"]').val('').datepicker('setStartDate', null);
                $('[name="EndDate"]').datepicker('setDate', new Date());
                $('[name="EndDate"]').val('').datepicker('setStartDate', null);
            
        );

     $("#datepicker2").datepicker(
            autoclose: true,
            todayHighlight: true
        ).datepicker();

【讨论】：

Aey，介意添加一些描述。请参阅 do I write a good 回答，Welcome 到 Stack Overflow！

【参考方案6】：

您还必须将最新的验证 CDN 包含到您的项目中：

https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css

https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css

https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js