weex☞日期时间选择器

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 => {
                   ...
                })