How can I force a DatePicker to be used for input instead of the keyboard on an HTML text input inside a WebView in Android

Question

I am attempting to learn Android development and have modified a sample app that loads a web page in a WebView. The web page contains a text input. I want to use the Android DatePicker to input a value instead of the keyboard.

The code below almost works. The DatePicker is displayed but throws an unknown error when I select a date and call loadUrl on the WebView in the onDateSet handler to update the value of the text input (end of code sample). I suspect a cross thread issue but I'm not sure. Any guidance is appreciated.

package com.freeze.android.hellowebview;

import java.util.Calendar;    
import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.DatePicker;

public class HelloWebView extends Activity {

    WebView webview;

    class DateJavaScriptInterface  
    {  
        public void pickDate() {  
            showDialog(0);          
        }  
    }
    public void loadScript(String script){      
        webview.loadUrl("javascript:(function() { " + script + "})()");             
    }

    private class HelloWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }

        @Override
        public void onPageFinished(WebView view, String url) {           
            loadScript("document.getElementById('trips_dateandtime').onfocus = function(){this.blur();window.DateInterface.pickDate();};");      
        }
    }

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        webview = (WebView) findViewById(R.id.webview);
        webview.setWebViewClient(new HelloWebViewClient());
        webview.getSettings().setJavaScriptEnabled(true);  
        webview.addJavascriptInterface(new DateJavaScriptInterface(), "DateInterface"); 
        webview.loadUrl("http://127.0.0.1:8000/mileage/default/index");
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {     
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {
            webview.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    @Override
    protected Dialog onCreateDialog(int id) {
        switch (id) {
        case 0:
            final Calendar c = Calendar.getInstance();
            int mYear = c.get(Calendar.YEAR);
            int mMonth = c.get(Calendar.MONTH);
            int mDay = c.get(Calendar.DAY_OF_MONTH);
            return new DatePickerDialog(this,
                        mDateSetListener,
                        mYear, mMonth, mDay);
        }
        return null;
    }

    private DatePickerDialog.OnDateSetListener mDateSetListener =
        new DatePickerDialog.OnDateSetListener() {
            @Override
            public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
                loadScript("document.getElementById('trips_dateandtime').value = 'test';"); //ERROR
            }

        };
}

Answer 1

Looks like runOnUiThread did the trick.