weui.io常规选择器改时间选择器（picker）

html

<div class="weui-cells">
    <div class="weui-cell weui-cell_access weui-cell_example">
        <div class="weui-cell__hd">
            <label class="weui-label">开机时间</label>
        </div>
        <div class="weui-cell__bd"></div>
        <div class="weui-cell__ft">
            <p id="showDatePicker">10:00</p>
        </div>
    </div>
    <div class="weui-cell weui-cell_access weui-cell_example">
        <div class="weui-cell__hd">
            <label class="weui-label">关机时间</label>
        </div>
        <div class="weui-cell__bd"></div>
        <div class="weui-cell__ft">
            <p id="showDatePicker2">10:00</p>
        </div>
    </div>
</div>

js

<script type="text/javascript">
    $(document).ready(function(){

        $('#showDatePicker').on('click', function () {
            TimePicker('showDatePicker');
        });

        function TimePicker(id) {
            var hours = [];
            var minites = [];
            if (!hours.length) {
                for (var i = 0; i < 24; i++) {
                    hours.push({
                        label: ('' + i).length === 1 ? '0' + i : '' + i,
                        value: i
                    });
                }
            }
            if (!minites.length) {
                for (var j = 0; j < 60; j++) {
                    minites.push({
                        label: ('' + j).length === 1 ? + j : '' + j,
                        value: j
                    });
                }
            }
            weui.picker(hours, minites,{
                defaultValue: [new Date().getHours() + 1, 0],
                onChange: function (res) {
                    var timeend = res[1].label < 10 ? ("0" + res[1].label) : res[1].label;
                    var time = res[0].label + ':' + timeend;
                    console.log(res);
                    $('#' + id).text(time)
                },
                onConfirm: function (res) {
                    var timeend = res[1].label < 10 ? ("0" + res[1].label) : res[1].label;
                    var time = res[0].label + ':' + timeend;
                    console.log(res);
                    $('#' + id).text(time)
                },
                title: '多列选择器'
            });
        }


        $('#showDatePicker2').on('click', function () {
            TimePicker('showDatePicker2');
        });
    })
</script>