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>