Android WebView上的日历选择器

　　最近在使用WebView做UI，UI交给做网页的来写，的却省事，重要的是美化效果还不错，这里就不多说了

　　今天要做一个日期选择界面，刚刚开始我想：既然是用HTML写的UI，写上JS代码，实现日历选择那就行了。但是做出来的效果并不理想

　　这里是一部分截图，当输入框控件在屏幕边上的时候，这时候选择器就不能完全显示出来，用户体验不好，然后试着把选择器始终放在一个位置，但是效果也不好。

　　想到Android本身就有DatePicker和TimePicker控件的，为何不直接使用呢。于是做了个效果还不

点击输入框弹出系统的日历设置工具设置好了返回在输入框上

不用写上复杂的JS代码了。。。。。代码如下

 1 import java.util.Calendar;
 2 import org.json.JSONException;
 3 import org.json.JSONObject;
 4 import android.app.Activity;
 5 import android.app.DatePickerDialog;
 6 import android.app.DatePickerDialog.OnDateSetListener;
 7 import android.os.Bundle;
 8 import android.os.Handler;
 9 import android.webkit.WebView;
10 import android.widget.DatePicker;
11 
12 public class MyWebViewTestActivity extends Activity {
13     public WebView webView;
14 
15     // Handler handler;
16 
17     @Override
18     public void onCreate(Bundle savedInstanceState) {
19         super.onCreate(savedInstanceState);
20         setContentView(R.layout.main);
21 
22         webView = (WebView) findViewById(R.id.myWebView);
28         webView.getSettings().setJavaScriptEnabled(true);
29         webView.addJavascriptInterface(new ProxyBridge(), "ProxyBridge");
30         webView.loadUrl("file:///android_asset/index.html");
31     }
32 
33     class ProxyBridge {
34         String date;
35         String json_date;
36         DatePickerDialog pickerDialog;
37         Handler handler = new Handler();
38         public void getDateTime() {
39             handler.post(new Runnable() {
40                 @Override
41                 public void run() {
42                     final Calendar cd = Calendar.getInstance();
43                     pickerDialog = new DatePickerDialog(
44                             MyWebViewTestActivity.this,
45                             new OnDateSetListener() {
46 
47                                 @Override
48                                 public void onDateSet(DatePicker view,
49                                         int year, int monthOfYear,
50                                         int dayOfMonth) {
51                                     try {
52                                         date = String.valueOf(year) + "-"
53                                                 + String.valueOf(monthOfYear)
54                                                 + "-"
55                                                 + String.valueOf(dayOfMonth);
56                                         JSONObject map = new JSONObject();
57                                         map.put("date", date);
58                                         // json_date = "[{\"time\":\"2012-02-18\"}]";
59                                         json_date = map.toString();
60                                     } catch (JSONException e) {
61                                         e.printStackTrace();
62                                     }
63                                     webView.loadUrl("javascript:setDateTime("
64                                             + json_date + ")");
65                                 }
66                             }, cd.get(Calendar.YEAR), cd.get(Calendar.MONTH),
67                             cd.get(Calendar.DAY_OF_MONTH));
68                     pickerDialog.show();
69                 }
70             });
71         };
73     }
74 }

以下是HTML的测试代码

<html>
<head>
<title>日期选择测试</title>
<script language="javascript">  
       
    function setDateTime(JSONdate){
    	var jsonobjs = eval(JSONdate);
    	var date=jsonobjs.date;
    	document.getElementById("datetext").value=date;
    }          
</script>

</head>
<body>
	<form>
		<input type="text" id="datetext"
			onclick="window.ProxyBridge.getDateTime();" value="" />
	</form>
</body>
</html>

简单而又方便

posted on 2012-04-18 16:04  EM_C  阅读(5408)  评论(3)  编辑  收藏  举报