weui 自定义datepicker 年月日上午下午四级联动的实现

由于项目需求，需要自定制年月日上午这种四级联动，经过模仿官方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;//非闰年二月
}

weui 自定义datepicker 年月日上午下午四级联动的实现相关推荐

ASP程序中调用函数Now()显示上午下午的问题
ASP程序中,调用函数Now(),显示的时间总是形如"2009-07-12 上午 08:12:56 "这样的,总显示"上午"和"下午",解决 ...
php用ajax方式实现四级联动
使用ajax方式实现了下简单的四级联动, 数据库: 以下为前台代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <titl ...
Android Setting 日期相关API，自定义DatePicker
最近在做Setting日期相关的工作,整理一下相关的API(相关代码源自Android 8.0高通代码) 注意:以下API来自Setting,使用的地方也在Setting中,如果其他非系统应用使用,可 ...
怎么将计算机工具栏时间去除,电脑时间显示怎么去掉上午下午
电脑时间显示怎么去掉上午下午以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 电脑时间显示怎么去掉上午下午点开始-设定- ...
通用四级联动下拉列表
Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-09-03 Blog: http://shaoyun.cnblogs.com/ 前面的文 ...
html中免费的四级联动,利用JS实现省市区街道四级联动插件
特效描述:利用JS实现省市区街道四级联动插件.利用JS实现省市区街道四级联动插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码所在地区所在地区请选择请选择请选择请选择 ...
laravel在线教育开发__四级联动（地区选择）
在线教育开发之四级联动为了实现地区的四级联动选择,可以使用ajax提交数据到控制器,控制器接收数据之后查询pid对应的area. 1.生成地区数据表,需要四级联动表源码请添+Q1143157804( ...
小程序开发--地区选择四级联动（选择省,市,县,镇）
前端时间接到一个项目,里面有涉及到地区选择四级联动(即能选择到镇).自己去网上收罗了一波,也没发现有很详细的,所以就自己来写,写完总结一下. 首先地址选择小程序有自带一个组件,我们就先来看看这个组件: ...
android三级联动、四级联动（地区选择）
GitHub地址:https://github.com/gamekonglee/RegionSelector 先上效果图: allprojects { repositories { .. maven ...

weui 自定义datepicker 年月日上午下午四级联动的实现

weui 自定义datepicker 年月日上午下午四级联动的实现相关推荐

最新文章

热门文章

weui 自定义datepicker 年月日 上午下午 四级联动的实现

weui 自定义datepicker 年月日 上午下午 四级联动的实现相关推荐

最新文章

热门文章

weui 自定义datepicker 年月日上午下午四级联动的实现

weui 自定义datepicker 年月日上午下午四级联动的实现相关推荐