移动端时间选择器

开发的一个简单的移动端时间选择器,支持多种主题,现在来共享一下。

Github地址:https://github.com/IronPans/LazyPicker

效果图:

如果你使用PC浏览器,那么你需要切换到手机模式才可使用。

步骤:按F12或鼠标右键--点击检查,再点击控制台左上角的手机模式按钮即可。

使用方法

引入CSS和JavaScript脚本:

<link rel="stylesheet" href="lazyPicker.min.css" />

<script src="lazyPicker.min.js"></script>

简单的表单(input)

<input type="text" class="date-picker" placeholder="选择日期" />

初始化时间选择器

var picker = new LazyPicker('.date-picker');

这里的class可自定义,不过要对应你要将其设置为时间选择器的input的class。

可选参数

LazyPicker 构造函数可设置第二个参数,为配置对象,可设参数说明:

theme:, // 主题 green(墨绿) | black(纯黑)

initDate: , // 设置初始年月日,格式YYYY-MM-DD或YYYY/MM/DD

minDate: , // 设置最小年份,默认是1950

maxDate: , // 设置最大年份,默认是初始年份 + 20,如果initDate和maxDate同时存在,年份以maxDate为主。

onChange: function(data) { // 监听选择时间改变

// data返回一个对象,包含属性year、month、day、date,分别表示年、月、日、日期

如果你发现Bug或者有更好的建议,欢迎在下方的评论区评论告知,你们的支持,才是LazyPicker改善之道。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端架构

web app响应式字体设置!rem之我见

之前做沙漠教育的时候,直接以设计图为准,然后强暴式,缩放处理。简单。直接,粗暴!但是,开发快。……一劳永逸!

40610
来自专栏张善友的专栏

ASP.NET 2.0 Virtual Earth Map Control

Microsoft Virtual Earth API 3.0中新增的一项强大的功能使用GeoRSS, GeoRSS提供了一种地理位置搜索与聚合的方案,并且可以...

1648
来自专栏钱塘大数据

【干货】让你用Excel做出强大漂亮的数据地图

看了大部分关于如何用excel做数据地图的回答,感觉最费劲的地方都在地图素材上,有用多边形描出来的(有点儿累),有推荐excel插件的(不喜欢依赖插件或软件包)...

973
来自专栏ytkah

dedecms利用addfields body在首页调用文章内容

  开源程序比较好的一点是可以进行二次开发,比如ytkah想要开发一个专家出诊表的功能模块,如下图所示,每天的专家都不一样,可以用到内容模型,但是相对比较复杂;...

3296
来自专栏儿童编程

儿童学编程,3分钟入门极简教程!

Scratch是一款由麻省理工学院(MIT)设计开发的少儿编程工具。使用者可以不认识英文单词,也可以不会使用键盘。就像搭积木一样把一块块积木形状的命令用鼠标拖拽...

682
来自专栏LinXunFeng的专栏

iOS - SceneKit显示与交互3D建模(一)

993
来自专栏wOw的Android小站

[Python]写给Dr.Wu的简单爬虫例子

这次要爬的数据来自网站:http://www.qlaee.com/zhuanlist.jsp?flag=3&p=1&columnumber=302&codemy...

562
来自专栏数据小魔方

think-cell chart系列20——使用建议及附加功能

今天是think-cell chart系列收尾篇——使用建议及附加功能。 由于think-cell chart图表插件是office平台的第三方插件,而且图表...

3354
来自专栏Google Dart

AngularDart4.0 英雄之旅-教程-01介绍

码云项目页:https://gitee.com/scooplolwiki/toh-6

552
来自专栏无原型不设计

优秀原型设计欣赏:饮品类App-Starbucks

Starbucks是星巴克的一种便捷购买App,可以在店内付款或提前订购。其中还内置了奖励,你可以收集星星,赚取免费的饮料和食物。这款App中,采用了一些小插画...

41512

扫码关注云+社区