1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Bootstrap Datepiker JQuery não funcionando em uma WebView no Android.

Bom Dia,

Tenho uma página web na qual uso bootstrap-datepicker. E estou desenvolvendo uma app para Android que tem uma WebView para essa página. Porém o datepicker não funciona corretamente nessa webview. Sendo que quando eu entro nessa página por outros navegadores no próprio Android, funciona perfeitamente! Já habilitei o JS através de:

webView.getSettings().setJavaScriptEnabled(true);

Mas ainda assim não funciona. O Calendario do datepicker até é exibido quando pressiono o campo.Mas quando seleciono uma data no calendario, nada acontece.

Minha Activity:

public class MainActivity extends Activity {

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final WebView webView = (WebView) findViewById(R.id.webview);

        webView.getSettings().setJavaScriptEnabled(true);

        webView.getSettings().setSupportZoom(true);

        webView.setWebViewClient(new WebViewClient());

        webView.loadUrl("http://192.168.0.1:8080/Projeto/Pagina/");
    }
}

Minha Jsp:

<div class="col-md-5 col-md-offset-3">
    <div class="panel panel-default">
        <div class="panel-heading"></div>
        <div class="panel-body">

            <form role="form" id="Form"
                action="<c:url value="/projeto/salva"/>" method="post">

                <div class="form-group">
                    <label for="data">Data do Registro:</label> 
                        <input class="form-control" data-provide="datepicker" id="data_registro" type="text" name="produto.data_registro"/>
                </div>

                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label for="numero">Número:</label>
                            <input class="form-control" id="nome" type="text" name="produto.numero" />
                         </div>
                     </div>
                </div>

                <div class="form-group">
                    <input class="btn btn-success" type="submit" value="Salvar" />
                </div>

Meus imports relacionados (acredito que sejam sé esses que importem pra questão) no header e no footer. Assim como a função em js:

<script type="text/javascript"
    src="<c:url value="/js/jquery-1.3.2.min.js"/>"></script>

<script src="https://code.jquery.com/jquery.js"></script>
<script src="${contexto}/bootstrap/datepicker/js/bootstrap-datepicker.js"></script>
<script>
    $(document).ready(function() {
        $('.datepicker').datepicker({
            format: 'dd/mm/yyyy'
        });
    });
  • Eu recomendo usar a propriedade type="date". Geralmente funciona.

    Roger Albino   12 de fev de 2014
  • Em que parte Roger?

    Leonardo Tonin Neto   12 de fev de 2014
  • Leonardo, <input type="date">. Os navegadores modernos, principalmente de mobile costumam colocar um data-picker nativo. Não sei se no navegador que você está usando tenha isso, mas só testar. Depois me fala se deu certo.

    Roger Albino   12 de fev de 2014
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags android jsp jquery web javascript datepicker ou faça a sua própria pergunta.