移动端时间选择器

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

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 条评论
登录 后参与评论

相关文章

来自专栏前端学习心得

如何清除浮动

963
来自专栏IMWeb前端团队

移动端重构实战系列5——form元素

form 大概要实现的效果如下图(具体demo可见sheral form): ? 粗略一看,跟line list差不多,好像可以直接套用,但是深究起来还是有那么...

2225
来自专栏Java大联盟

Java基础之面向对象

955
来自专栏程序员的知识天地

移动web端常见bug

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。

663
来自专栏智能合约

PHP性能分析之Xhprof数据说明

1066
来自专栏用户2442861的专栏

关于Div的宽度与高度的100%设定

正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度...

342
来自专栏星回的实验室

使用Headless Browser渲染页面

忙了很长一段时间,需要浮出水面来总结一工作了,不然做过的东西就像翻过一页完全没有记住的书,难免徒劳。

582
来自专栏黄Java的地盘

动态生成DOM元素的高度及行数获取与计算方法

在开发IM的项目过程中,经常会有出现一些需要计算DOM高度,然后超出若干行隐藏等需求。很多时候,需要计算高度的DOM元素都是动态生成的,我们无法在数据渲染前获取...

712
来自专栏偏前端工程师的驿站

CSS魔法堂:稍稍深入伪类选择器

 过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分...

822
来自专栏数据和云

insert into太慢?Roger 带你找真凶

李真旭(Roger) ACOUG 核心专家,Oracle ACE,云和恩墨技术专家 编辑手记:昨天谈到索引并不是万能的,事实上很多无用的索引给数据库带来很大的维...

3254

扫码关注云+社区