weex提供的时间日期选择都是分开，调用的是系统自带日期控件，但是如何去扩展那，只有回归原生，网上找了找第三方的库，基本需求可以满足，但是发现好多没有监听取消键的回调。还好，找到了一个可以自定义布局，监听取消键回调的库。话不多说，开工。
下面是如何实现日期时间选择器，先上预览图
预览图
首先引入第三方依赖
compile 'com.contrarywind:Android-PickerView:4.1.6'
创建module
public class GetCustomTime extends WXModule {
protected JSCallback callback;
private TimePickerView pvCustomTime;
@JSMethod(uiThread = true)
public void getDate(JSCallback callback) {
this.callback = callback;
initCustomTimePicker(callback);
pvCustomTime.show();
}
private void initCustomTimePicker(final JSCallback callback) {
Calendar selectedDate = Calendar.getInstance();//系统当前时间
Calendar startDate = Calendar.getInstance();
startDate.set(2014, 1, 23);
Calendar endDate = Calendar.getInstance();
endDate.set(2027, 2, 28);
//时间选择器 ，自定义布局
pvCustomTime = new TimePickerBuilder(mWXSDKInstance.getContext(), new OnTimeSelectListener() {
@Override
public void onTimeSelect(Date date, View v) {//选中事件回调
Map data2 = new HashMap();
data2.put("result", true);
data2.put("date", getTime(date) + "");
callback.invoke(data2);
}
})
.setDate(selectedDate)
.setRangDate(startDate, endDate)
.setLayoutRes(R.layout.pickerview_custom_time, new CustomListener() {
@Override
public void customLayout(View v) {
final TextView tvSubmit = (TextView) v.findViewById(R.id.tv_finish);
TextView ivCancel = (TextView) v.findViewById(R.id.iv_cancel);
tvSubmit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
pvCustomTime.returnData();
pvCustomTime.dismiss();
}
});
ivCancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.e("TAG", "点击了取消");
pvCustomTime.dismiss();
Object obj = new Object();
callback.invoke(obj);
}
});
}
})
.setContentTextSize(18)
.setType(new boolean[]{true, true, true, true, true, false})
.setLabel("年", "月", "日", "时", "分", "秒")
.setLineSpacingMultiplier(1.2f)
.setTextXOffset(0, 0, 0, 40, 0, -40)
.isCenterLabel(false) //是否只显示中间选中项的label文字，false则每项item全部都带有label。
.setDividerColor(0xFF24AD9D)
.build();
}
private String getTime(Date date) {//可根据需要自行截取数据显示
Log.d("getTime()", "choice date millis: " + date.getTime());
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
return format.format(date);
}
}
自定义日期选择布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#EEEEEE">
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#aaa" />
<TextView
android:id="@+id/iv_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="17dp"
android:padding="4dp"
android:text="取消"
android:textColor="#24AD9D"
android:textSize="16sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_gravity="center"
android:padding="4dp"
android:textColor="#24AD9D"
android:textSize="16sp"
android:text="选择时间"
/>
<TextView
android:id="@+id/tv_finish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="17dp"
android:padding="4dp"
android:text="确定"
android:textColor="#24AD9D"
android:textSize="16sp" />
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#aaa" />
</RelativeLayout>
<!--此部分需要完整复制过去，删减或者更改ID会导致初始化找不到内容而报空-->
<LinearLayout
android:id="@+id/timepicker"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="horizontal">
<com.contrarywind.view.WheelView
android:id="@+id/year"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<com.contrarywind.view.WheelView
android:id="@+id/month"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.1" />
<com.contrarywind.view.WheelView
android:id="@+id/day"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.1" />
<com.contrarywind.view.WheelView
android:id="@+id/hour"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.1" />
<com.contrarywind.view.WheelView
android:id="@+id/min"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.1" />
<com.contrarywind.view.WheelView
android:id="@+id/second"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.1" />
</LinearLayout>
</LinearLayout>
配置相应的权限，在WXApplication中加入
WXSDKEngine.registerModule("pickDate", GetCustomTime.class);
然后就是前端调用
const pickDate= weex.requireModule('pickDate')
... //在方法中直接使用就行了
pickDate.getDate(res => {
...
})
网友评论