WeUI移動頁面實現時間選取器（年-月-日-時-分）

標籤：樣式   需要   時間選擇   技術   技術分享   anim   val   頁面   建議   

在做公眾號的時候，使用的WeUI樣式，有一個需求是使用者選擇一個預約時間，需要年月日並精確到小時和分鐘。

但是WeUI的picker組件不支援直接顯示5列，根據WeUI.js作者的建議，是將日期和時間選擇作為兩個選取器來實現。

所以我的實現思路是先選擇日期，然後自動跳出時間選擇，來模仿一個時間選取器。日期屬於datepicker，時間屬於普通的picker。

：

點擊期望時間跳出datepicker：

在選擇時間並確定後跳出時間選擇，這是一個普通picker：

之後就可以對選擇的時間做處理了。

實現方法也很簡單：在第一picker選擇並消失後，調用第二個picker，這樣可以保證連續調用。

關鍵在於監聽第一個picker消失的事件，第一個消失後才能調用第二個。

代碼：

    $(‘.ma_expect_date‘).click(function(event) {        var _this = this;        weui.datePicker({            start: new Date(),            end: 2030,            defaultValue: [new Date().getFullYear(), new Date().getMonth()+1, new Date().getDate()],            onConfirm: function(result){                // 二級調用：時間                $(‘.ma_expect_date_picker .weui-picker‘).on(‘animationend webkitAnimationEnd‘, function() {                    show_expect_time_picker(_this, result);                });            },            id: ‘ma_expect_date‘,            className: ‘ma_expect_date_picker‘        });    });    // -----------------------二級調用：時間    var hours = [],        minites = [],        symbol = [{ label: ‘:‘, value: 0 }];    function show_expect_time_picker(_this, date) {        var date = date[0].label + date[1].label + date[2].label;        if (!hours.length) {            for (var i = 0; i< 24; i++) {                var hours_item = {};                hours_item.label = (‘‘ + i).length === 1 ? ‘0‘ + i : ‘‘ + i;                hours_item.value = i;                hours.push(hours_item);            }        }        if (!minites.length) {            for (var j= 0; j < 60; j++) {                var minites_item = {};                minites_item.label = (‘‘ + j).length === 1 ? ‘0‘ + j : ‘‘ + j;                minites_item.value = j;                minites.push(minites_item);            }        }        weui.picker(hours, symbol, minites, {            defaultValue: [new Date().getHours()+1, 0, 0],            onConfirm: function(result) {                var time = result[0].label + ‘:‘ + result[2].label;                var expect_date = date + ‘ ‘ + time;                $(_this).find(‘.weui-cell__ft‘).text(expect_date);            },            id: ‘ma_expect_time‘        });    }

 

WeUI移動頁面實現時間選取器（年-月-日-時-分）