引导日期选择器和引导验证器 [英] Bootstrap datepicker and bootstrap validator

问题描述

我正在使用 此处 中的 bootstrap datepicker 和 这里.我也在使用引导程序 v3.1.1.

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

这是我的 HTML 代码:

<div class="col-lg-3"><div class="form-group"><input name="endDate" type="text" class="datepicker form-control">

</表单>

在我添加的 .js 文件中:

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

对于验证器:

$(document).ready(function () {$('#myForm').bootstrapValidator({反馈图标:{有效:'glyphicon glyphicon-ok'，无效:'glyphicon glyphicon-remove',验证:'glyphicon glyphicon-refresh'},字段:{结束日期: {验证器:{日期: {格式:'DD/MM/YYYY',消息:'格式为 dd/mm/yyyy'},不是空的: {message: '该字段不能为空'}}}}});});

解决方案

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

所以你应该添加这个:

1) 与 bootstrap-datetimepicker 一起使用:

$('.date').on('dp.change dp.show', function(e) {//当用户更改日期时重新​​验证日期$('#myForm').bootstrapValidator('revalidateField', 'endDate');});

2) 与 bootstrap-datepicker 一起使用:

$('.datepicker').on('changeDate show', function(e) {//当用户更改日期时重新​​验证日期$('#myForm').bootstrapValidator('revalidateField', 'endDate');});

有关详细信息，请参阅日期时间选择器示例.

I am using the bootstrap datepicker from here and the bootstrap validator from here. Also I am using bootstrap v3.1.1.

After selecting a date from datepicker the validator does not react. It works just when I use the keyboard to enter a date.

Here is my HTML code:

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

In .js file I added:

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

and for validators:

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

解决方案

When using BootstrapValidator with Bootstrap-datetimepicker or Bootstrap-datepicker, you should revalidate the date field.

So you should add this:

1) using with bootstrap-datetimepicker :

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

2) using with bootstrap-datepicker :

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

See the datetimepicker example for more information.

这篇关于引导日期选择器和引导验证器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！