当前位置: 首页 > Web前端 > HTML5

手机端简单的日历控件iantoo.week()

时间:2023-04-05 16:28:28 HTML5

原文链接使用导入文件:./build/css/iantooweek.css./build/js/iantooweek.js在页面调用:iantoo.week()详细使用方法见page/iantooweek/index.html兼容性ios8.0+Android4.0+previewGitHubAPIel可选,string,默认会直接插入到body中。指定日历模块渲染的元素,将格式输入'.className'或#idName,最后通过querySelector方法进行搜索。date可选,默认值:系统当前时间,即:newDate()获取的时间。、type:string默认初始化时间,格式必须为“YYYY-MM-DDHH:MM:SS”或“YYYY-MM-DD”。setSystemDatetype:string默认系统时间YYYY-MM-DDHH:MM:SS|YYYY-MM-DD|Timestamp手动设置系统时间,通常该功能不适用。主要是为了避免用户修改手机日历后获取的本地时间和服务器时间不一致,可以通过获取服务器时间手动设置。不会获取本地时间showWeekoptional,boolean,defaulttrue.是否显示周列,默认显示。符号可选,数组,默认[]。用于标记某一天的提醒,标记的日期下方会生成一个点提示。输入格式如:"['2018-06-5','2018-6-23']"RootNoScroll不需要,boolean,默认为true滚动。如果为false,则禁止左右滚动。禁止滚动后,不会左右滑动,也不会触发scroll、touchStartFun和touchEndFun方法。它只会在与某些模型兼容时被调用。theme主题颜色theme.selectGB非必填,字符串,默认:不同版本会改变选定日期的背景色,颜色值的传入方式分为十六进制、RGB、RGBA等多种颜色模式,最后以element.style.background=color的形式赋值。theme.selectFontColoroptional,string,default:'#ffffff'某天选择的文字颜色,格式同theme.selectGBtheme.systemBGoptional,string,default:系统时间会随着版本不同而改变背景颜色,当选择系统当前时间,会先以theme.selectGB的颜色显示。格式同theme.selectGBtheme.systemFontColor,optional,string,default:系统时间的文字颜色会随版本变化,点击时会先显示theme.selectFontColor的颜色。格式同theme.selectGBclickDate,可选,函数。当点击某一天时,该方法会被回调。下面的iantoo.week({clickDate:function(date){console.info(date)//{year:2018,month:6,day:29}}})返回对应的年月日时间当前日期。渲染不是必需的,功能。日历调用后会自动触发该方法,例如:iantoo.week({render:function(data,systemDate){}})data返回当前页面渲染时周的时间数组列表systemDate返回当前计算机系统对应updataRender的时间、年、月、日是可选的,function。日历控件更新后调用,只有在调用iantoo.week.update()时才会触发。滚动可选功能。每次滑动后调用的方法返回当前显示的7天日期。touchStartFun可选,函数。滑动开始时触发的方法。touchEndFun可选,函数。滑动结束触发的方法注:touchStartFun和touchEndFun方法分别对应touchstart和touchend,这两个方法通常在Android设备上使用。当一个activity打开时,如果有原生水平滑动的方法,需要原生支持禁止滚动,可以通过这两个方法来控制是否禁止原生滑动。对于已经通过防止冒泡事件进行控制的IOS设备,不需要进一步控制。