it-roy-ru.com

Bootstrap средство выбора даты и bootstrap средство проверки

Я использую указатель даты bootstrap из здесь и валидатор bootstrap из здесь . Также я использую bootstrap 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'
                    }
                }
            }
        }
    });
});
4
user3411746

При использовании 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 для получения дополнительной информации.

14
Arkni

Каким-то образом после выбора даты datepicker () теряет фокус поля даты, и ни один из плагинов валидатора не может видеть поле ввода даты как заполненное (действительное) . В заключение, простой .focus () делает свое дело ,.

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

Выше принятый ответ не сработал. То, что сработало для меня, было очень просто.

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

Надеюсь это поможет!

1
Vijay

В большинстве случаев приведенные выше ответы должны работать, но если в конечном итоге какие-либо ответы не подойдут вам, попробуйте это тоже:

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

Основная идея в этом скрипте состоит в том, чтобы форсировать проверки путем «установки» и после «сброса» фокуса. Я понимаю, что это будет похоже на эмуляцию обычных событий, которые позволяют запускать проверки.

Удачи!

0
Davhec