由於項目需求，需要自定製年月日上午這種四級聯動，經過模仿官方weui.min.js實現了上述功能。
根據此種樣式可以靈活實現月日兩級聯動或年月日 時分秒 六級聯動功能。代碼如下：
<link rel="stylesheet" href="/wxweb/css/weui.css"> //注意改爲自己的路徑
<script src="/wxweb/static/wxweb/jquery/jquery-3.4.1.min.js"></script>
<body>
<input type="text" id="test"/>
</body>
<script src="/wxweb/js/weui/weui.min.js"></script>
<script src="/wxweb/static/wxweb/js/test.js"></script>
test.js如下：
$(document).ready(function() {
$('#test').on('click', function() {
weui.picker(setmydate(), {
//此處編寫各種屬性和事件
onConfirm: function(result) {
console.log(result);
}
});
});
});
function setmydate() {
var t = new Date;
var year = [];
if(!year.length){
for(var i = t.getFullYear() - 5; i < t.getFullYear() + 5; i++){
year.push({
label: i+'年',
value: i,
});
}
}
var month = [];
if(!month.length) {
for(var i = 1; i < 13; i++) {
month.push({
label: i + "月" ,
value: i
});
}
}
var day = [];
if(!day.length){
for(var i = 1; i < 32; i++) {
day.push({
label: i + "日" ,
value: i
});
}
}
var halfday = [{
label:'上午',
value:'1'
},{
label:'下午',
value:'2'
}]
var mydate_select = [];//根據相關數據源進行綁定
$.each(year, function(i) {
var level1 = {
label: year[i].label,
value: year[i].value,
children: []
};
$.each(month, function(j) {
if(1) {
var level2 = {
label: month[j].label,
value: month[j].value,
children: []
};
$.each(day, function(x) {
if(formatterday(year[i].value,month[j].value) == 1 && day[x].value < 32) {
var level3 = {
label: day[x].label,
value: day[x].value,
children:[]
};
$.each(halfday, function(z) {
var level4 = {
label:halfday[z].label,
value:halfday[z].value,
};
level3.children.push(level4);
});
level2.children.push(level3);
}
else if(formatterday(year[i].value,month[j].value) == 2 && day[x].value < 31){
var level3 = {
label: day[x].label,
value: day[x].value,
children:[]
};
$.each(halfday, function(z) {
var level4 = {
label:halfday[z].label,
value:halfday[z].value,
};
level3.children.push(level4);
});
level2.children.push(level3);
}
else if(formatterday(year[i].value,month[j].value) == 3 && day[x].value < 30){
var level3 = {
label: day[x].label,
value: day[x].value,
children:[]
};
$.each(halfday, function(z) {
var level4 = {
label:halfday[z].label,
value:halfday[z].value,
};
level3.children.push(level4);
});
level2.children.push(level3);
}
else if(day[x].value < 29){
var level3 = {
label: day[x].label,
value: day[x].value,
children:[]
};
$.each(halfday, function(z) {
var level4 = {
label:halfday[z].label,
value:halfday[z].value,
};
level3.children.push(level4);
});
level2.children.push(level3);
}
});
level1.children.push(level2);
}
});
mydate_select.push(level1);
});
return mydate_select;
}
function formatterday(year,month) {
var bigmonth = [1,3,5,7,8,10,12];
var smallmonth = [4,6,9,11];
if(bigmonth.indexOf(month) >= 0)return 1;//大月份
if(smallmonth.indexOf(month)>= 0 )return 2;//小月份
else if((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) return 3;//閏年二月
else return 4;//非閏年二月
}