推荐搜索: 魏义齐 网站防扒js微信号刷新 利用hbuilder打包APP的步骤清空

当前位置:首页 > 软件素材 > 插件素材 > 正文

一个绝对值得收藏的日期选择插件

发布时间:2018-07-11 00:30:00作者:魏义齐阅读:(

本文为博主原创文章,未经博主允许不得转载。

客户需求是这样的,同一个移动页面有两个日期选择,一个是生日,有年月日,一个是纪念日,只有月和日,要求这两个日期选择都用这个插件。

这个插件去年给客户做项目用到过,但当时觉得修改起来比较复杂就没有整理,今年同一个客户又想再次使用它,所以特此整理。

该插件的特点有三1.css文件通用,不管页面有几处需要这个插件,只需要一个样式就可以;2.js文件可重复使用只要引入顺序正确;3.只能在移动端使用,因为日期是滑动进行选择的。

项目实例:https://www.weiyiqi.net/lookdoc/xm3/zhuce.html(应客户要求,关键信息已用“xxx”代替)。

下面说用法:

LCalendar.css就用我提供的不要做任何修改,如果需求样式不一样如实例中生日选择有年月日,婚姻选择只有月和日,那么就把LCalendar.js复制一份,修改名字,引入顺序不要颠倒,比如生日我引用的LCalendar_birthday.js,婚姻我引用的LCalendar.js,样式的修改直接在js里操作,大概在55行~85行。如果想修改出生年份范围,例如出生年份向前推100年:
另外,重复使用时需修改input的name和id,具体的直接看案例源码。

目前还有一个小问题,就是颜色最深的不在选中框里,我修改过,但是选中的值点确定后与文本框的值不一样,哪位大神知道怎么修改,请在下面评论框指导一下?!


2018年7月12日完善:上面说的颜色最深的不在选中框里,LCalendar.css第81行注释掉字体大小即可,感谢网友“流言碎碎念”的帮助。

魏义齐全栈技术交流:魏义齐web前端技术交流

打赏本站

原创不易,您的打赏就是博主更新的动力!

上一篇:两组li向左滚动代码 下一篇:插件收藏:自动播放响应式轮播图代码