0

Tenho um modal em HTML e nele existem dois campos do tipo text que devem receber datas, estou tentando aplicar uma máscara utilizando jQuery a esses campos, porém não tive sucesso, a máscara se aplica normalmente quando os campos não fazem parte do modal.

Código HTML:

<div id="modalNovaCrise" data-backdrop="static" class="modal fade" role="dialog"  style="min-width: 1050px;">
    <form id="formNovaCrise" action="#">
    <div class="col-md-offset-3 mg-tp-15">
        <!-- Modal content-->
        <div class="modal-content col-md-8">
            <div id="newCrise" class="mg-tp-15" >
                <!-- ko with: novaCrise-->

                    <fieldset>
                        <legend>Previsões</legend>

                        <div class='col-md-12 col-sm-12'>
                            <div class='row'>
                                <div class='form-group'>
                                    <div class="col-md-6 col-sm-6">
                                        <input id="prevSolucao" data-bind="value: prevSolucao, enable: !semPrevisao()" placeholder="Previsão de solução" type="text" class="inpText" style="padding-left: 13px;">
                                        <input type="checkbox" data-bind="checked: semPrevisao, click: clearSemPrevisao"  name="Sem Previsão" style="vertical-align: middle;">
                                        <span style="vertical-align: middle;">À Definir</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class='col-md-12 col-sm-12'>
                            <div class='row'>
                                <div class='form-group '>
                                    <div class="col-md-12 col-sm-12">
                                        <input id="proxAtual" data-bind="value: proxAtualizacao" placeholder="Próxima atualização" type="text" class="form-control"  style="padding-left: 13px;">
                                    </div>
                                </div>
                            </div>
                            <div class='row'>
                                <div class='form-group '>
                                    <div class="col-md-12 col-sm-12">
                                        <textarea data-bind="value: observacao" class="form-control" placeholder="Observação" id="Observacao" style="margin-bottom: 8px;"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </fieldset>
                <!-- /ko -->
            </div>
        </div>
    </div>
    </form>
</div>

Javascript:

$(document).ready(function() {
    ko.applyBindings(novaCriseVM, $('#newCrise')[0]);

    $("#proxAtual").mask("99/99/9999 99:99"); 
    $("#prevSolucao").mask("99/99/9999 99:99"); 
});

Acredito que o problema esteja relacionado ao uso do modal.

1
  • Você abre o modal e carrega os campos dentro dele dinamicamente ? Commented 28/12/2016 às 12:02

1 Resposta 1

1

Para funcionar o código jquery

>    $("#proxAtual").mask("99/99/9999 99:99"); 
>    $("#prevSolucao").mask("99/99/9999 99:99");

Deve ser executado depois dos inputs estarem renderizados na tela, se você executar antes não ira funcionar. Se você carregar de maneira dinâmica(os inputs), após carregar você deve chama-los novamente para aplicar a mascara.

Por isso se usa o $(document).ready(), que nada mais é do que a pagina esta renderizada? então executa isso agora.

1
  • Realmente meu erro foi aplicar a máscara no campo antes dele ser renderizados, obrigado pela ajuda. Commented 29/12/2016 às 17:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .