Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

Here is my requirement : I'am loading one html file on to a WebView. I have a button in html file to select the date. When i click on that button i want to open android date picker dialog. And after selecting the date, i want to display the selected date in html file. Can anyone guide me. please. HTML :

 <input type="button" value="Select Date" onClick="openDatePickerDialog()" />
 <p id = "date">--</p>

Javascript :

 function openDatePickerDialog() {
   AndroidFunction.openDatePickerDialog();
 }

function callFromActivity(date) {
document.getElementById('date').innerHTML = date;
 }

My Activity :

  public class MainActivity extends Activity {
WebView myBrowser;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    myBrowser = (WebView)findViewById(R.id.mybrowser);

    final MyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface(this);
    myBrowser.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");

    myBrowser.getSettings().setJavaScriptEnabled(true); 

    myBrowser.loadUrl("file:///android_asset/test.html");      



}

public class MyJavaScriptInterface 
{
    private int mYear;
    private int mMonth;
    private int mDay;
    static final int DATE_DIALOG_ID = 0;

    Context mContext;

    MyJavaScriptInterface(Context c)
    {
        mContext = c;
    }


    public void openDatePickerDialog()
    { 
        Calendar c = Calendar.getInstance();
        mYear = c.get(Calendar.YEAR);
        mMonth = c.get(Calendar.MONTH);
        mDay = c.get(Calendar.DAY_OF_MONTH);

        //updateDisplay();

        showDialog(DATE_DIALOG_ID);
    }
    private void updateDisplay() {

        String date = new StringBuilder().append(mMonth + 1).append("-")
        .append(mDay).append("-")
        .append(mYear).append(" ").toString();

        Toast.makeText(getApplicationContext(), date, Toast.LENGTH_LONG).show();

        myBrowser.loadUrl("javascript:callFromActivity(\""+date+"\")");
    }


    private DatePickerDialog.OnDateSetListener mDateSetListener =
        new DatePickerDialog.OnDateSetListener() {

        public void onDateSet(DatePicker view, int year, 
                int monthOfYear, int dayOfMonth) {
            mYear = year;
            mMonth = monthOfYear;
            mDay = dayOfMonth;
            updateDisplay();
        }
    };


    protected Dialog onCreateDialog(int id) {
        switch (id) {
        case DATE_DIALOG_ID:
            return new DatePickerDialog(MainActivity.this,
                    mDateSetListener,
                    mYear, mMonth, mDay);
        }
        return null;
    }

}
 }

Problem : I'am not getting DatePicker Dialog When i click on button. Where i'am going wrong ? Is my approach correct ?

share|improve this question
where you are setting onclicklistner to recieve button click event. Only then you can call function openDatePickerDialog – Bharat Sharma Apr 26 '12 at 6:26
Bharat, If i uncomment the line updateDisplay() inside openDatePickerDialog(), the toast message is getting diaplayed. That means openDatePickedDialog() method is getting called. – SANTHOSH Apr 26 '12 at 6:31
DatePickerDialog(MainActivity.this,mDateSetListener,mYear, mMonth,mDay); instead of MainActivity.this can you tried with mContext which you have passed – Bharat Sharma Apr 26 '12 at 6:43
I tried but no luck. – SANTHOSH Apr 26 '12 at 6:47
getapplicationcontext also you have tried – Bharat Sharma Apr 26 '12 at 6:56
show 1 more comment

2 Answers

up vote 1 down vote accepted 
public void openDatePickerDialog()
{ 
    Calendar c = Calendar.getInstance();
    mYear = c.get(Calendar.YEAR);
    mMonth = c.get(Calendar.MONTH);
    mDay = c.get(Calendar.DAY_OF_MONTH);

    //updateDisplay();
    DatePickerDialog dp = new DatePickerDialog(this,
            mDateSetListener,
            mYear, mMonth, mDay);
    dp.show();
}

can you try this once.

share|improve this answer
Bharat, my button is in html file. Not in android layout (xml) file. – SANTHOSH Apr 26 '12 at 6:39
Your code works fine if my button is in android xml file. – SANTHOSH Apr 26 '12 at 6:40
ya i am looking for your problem. – Bharat Sharma Apr 26 '12 at 6:44
But it opens a normal alert dialog box. The following code works inside openDatePickerDialog() method. AlertDialog.Builder myDialog = new AlertDialog.Builder(MainActivity.this); myDialog.setTitle("HELLO!"); myDialog.setMessage("sample test"); myDialog.setPositiveButton("ON", null); myDialog.show(); – SANTHOSH Apr 26 '12 at 7:06
I got it. I removed DatePicker related code from MyJavaScriptInterface class and placed in MainActivity. Now it works. Thanks Bharat – SANTHOSH Apr 26 '12 at 7:14
show 3 more comments
up vote 3 down vote

Here is a sample code I use do show, derived from the code here:

In the html code, add 2 javascript functions:

// Fonction d'appel calendrier Android
function f_CallCalendar(Tag)
{
    MSSAndroidFunction.openDatePickerDialog(Tag);
}
// Fonction de retour de la date
function callFromActivity_RetDate(Tag, data) {
    document.Form.vDate.value = data;
}

The Tag is the id of the input form to be completed. You call the javascript functions like this:

<input name="vDate" type="text" size="11" />&nbsp;
<input name="Submit" type="button" onclick="f_CallCalendar('vDate')" value="Calendrier*" />

And here is the java code implemented. Note that the MyJavaScriptInterface is declared inside the MainActivity:

public class MainActivity extends Activity 
        implements TextWatcher{
    WebView MainWebView;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MainWebView = (WebView)findViewById(R.id.main_webview);
        MainWebView.getSettings().setJavaScriptEnabled(true);
        final MyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface(this);
        MainWebView.addJavascriptInterface(myJavaScriptInterface, "MyJavaScriptInterface");
    }

    // Classe de prise en charge du java privé
    public class MyJavaScriptInterface
    {
        public String m_szTagId;

        Context mContext;

        MyJavaScriptInterface(Context c)
        {
            mContext = c;
        }

        public void openDatePickerDialog(String szTagId)
        {
            m_szTagId = szTagId;
            Calendar c = Calendar.getInstance();
            DatePickerDialog dp = new DatePickerDialog(mContext, new OnDateSetListener() {
                public void onDateSet(DatePicker view, int year,
                        int monthOfYear, int dayOfMonth) {
                    String szDate = String.format("%02d/%02d/%04d", dayOfMonth, monthOfYear+1, year);
                    MainWebView.loadUrl("javascript:callFromActivity_RetDate(\""+m_szTagId+"\", \""+szDate+"\")");
                } }, c.get(Calendar.YEAR), c.get(Calendar.MONTH), c.get(Calendar.DAY_OF_MONTH));
            dp.show();
        }

    } // Class MyJavaScriptInterface

} // class MainActivity

Here is it. Hope this can help.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.