Github精选 – 适合移动端的HTML5 Datepicker
通过 HTML5 的 <input> 新属性可以简单方便地调用手机的原生 Datepicker,但功能较弱,定制性差。如果不要求调用手机原生的 Datepicker,目前 GitHub 上有不少优秀的基于 HTML5 开发的 Datepicker 可供选择,博主从 GitHub 中精选了几个优秀的作品供读者选择使用。
m-date-picker
m-date-picker 基于 React,提供了 iOS 风格的日期选择方式,与原生 Datepicker 非常相似。
- 主页: https://github.com/react-component/m-date-picker
- Demo: http://react-component.github.io/m-date-picker/examples/popup.html
- 推荐: ★★★★★
- 优点: 使用流畅,与原生 Datepicker 非常相似;功能强大,能满足一般需求
- 不足: 暂无
m-date-picker截图
ios-datepicker
ios-datepicker 提供了 iOS 风格的日期选择方式,有上下滑动、左右滑动两种选择方式。
- 主页: https://github.com/otchenash/ios-datepicker
- Demo: http://demo.powerxing.com/html/datepicker/ios-datepicker/
- 推荐: ★★★☆☆
- 优点: 在手机上使用流畅,并且在 PC 端也支持良好
- 不足: 主页的文档不完善,缺乏相关的使用说明
ios-datepicker截图
mobipick
mobipick 基于 jQuery Mobile,提供了安卓风格的日期选择方式,通过点击 ‘+’、’-‘ 来选择日期。
- 主页: https://github.com/sustainablepace/mobipick
- Demo: http://mobipick.sustainablepace.net or http://demo.powerxing.com/html/datepicker/mobipick/
- 推荐: ★★★★☆
- 优点: 支持移动端、PC端,提供了丰富的 Demo。
mobipick截图
mobile508datepicker
mobile508datepicker 基于 jQuery Mobile,提供了安卓风格的日期选择方式,通过滑动来选择日期。
- 主页: https://github.com/jsdev/mobile508datepicker
- Demo: http://demo.powerxing.com/html/datepicker/mobile508datepicker/examples/demo1.html
- 推荐: ★★★☆☆
- 优点: 通过滑动的方式选择日期,体验会好一些
- 不足: 滑动效果不够流畅,不支持 PC 端
mobile508datepicker截图
PikadayResponsive
PikadayResponsive 移动端与 PC 端自适应的日期选择器,在移动端调用原生 Datepicker,而在 PC 端则调用 js 实现的日期选择器。
- 主页: https://github.com/mydea/PikadayResponsive
- Demo: https://mydea.github.io/PikadayResponsive/ or http://demo.powerxing.com/html/datepicker/PikadayResponsive/
- 推荐: ★★★☆☆
- 优点: 渐进式增强
- 不足: 原生 Datepicker 自定义功能较弱
PikadayResponsive截图

文章很给力?微信扫一扫给作者打赏2元 :)
~感谢赞助者~
Github精选 – 适合移动端的HTML5 Datepicker的更多相关文章
- 在web端使用html5访问远程桌面
背景: 2019年12月5日,微软宣布放弃浏览器Edge,转而推出一款新的浏览器,而这款新浏览器将会采用谷歌的Chromium 内核... 好了,反正已经无力吐槽,微软烂尾的项目也不是一个两个了,之前 ...
- zx-editor 移动端(HTML5)富文本编辑器,可与原生App混合(hybrid)开发
ZxEditor 移动端HTML文档(富文本)编辑器,支持图文混排.引用.大标题.无序列表,字体颜色.加粗.斜体. 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发. 源码地址 ...
- html5 app开发重大消息-腾讯在技术端推进Html5生态发展
中新网5月3日电 日前,腾讯正式发布腾讯浏览服务(Tencent Browser Service,以下简称TBS),宣布为合作伙伴提供整合腾讯底层技术.内容框架.广告体系以及大数据等多方面能力的升级浏 ...
- 适合pc端的移动拖拽,分享一下。
h5新加的特性拖拽事件,但是只适合PC端哦.不多说了上代码 <!DOCTYPE html> <html> <head> <title></titl ...
- GitHub 上适合新手的开源项目(Python 篇)
作者:HelloGitHub-卤蛋 随着 Python 语言的流行,越来越多的人加入到了 Python 的大家庭中.为什么这么多人学 Python ?我要喊出那句话了:"人生苦短,我用 Py ...
- 移动端使用HTML5表单增强体验
我们知道,HTML5新增了许多表单类型,如: number,email,url,tel,datetime,month,datetime-local等等,像datetime,month这些非常方便,免得 ...
- 精选7款绚丽的HTML5和jQuery图片动画特效
在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...
- 一个不错的Html5 DatePicker控件,主要支持手机端。
原地址不知道在哪了,下载地址 QQ群:616945527 Html5控件wen文件夹中DatePicker.rar
- 移动端实现HTML5 mp3录音踩坑指南:系统播放音量变小、一些机型录音断断续续 之 MediaRecorder和AudioWorklet的终极对决
目录 H5录音见坑填坑 采用MediaRecorder采集音频 音频格式:WebM和PCM 从WebM封装容器中提取PCM数据 录音的兼容性 困扰已久的H5录音时系统播放音量变小的问题 H5录音见坑填 ...
随机推荐
- bzoj 1862: [Zjoi2006]GameZ游戏排名系统 & bzoj 1056: [HAOI2008]排名系统
傻叉了一晚上,把t打成x,然后这题神奇在于输出一段数,不足的不用输出,一开始我的是直接找没有后面就退,然后这样会格式错误囧……然后最后zj的还卡了下空间,于是不用string就过了……string毁一 ...
- BZOJ1010:[HNOI2008]玩具装箱——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=1010 P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行 ...
- 阿里云遇到的坑:CentOS7防火墙(Firewalld),你关了吗?
阿里云官方教程: https://help.aliyun.com/knowledge_detail/41317.html 百度参考的牛人教程(推荐): http://www.111cn.net/sys ...
- webpack css压缩方案
css-loader原有的minimize选项在1.0.0版本已经移除,不能使用其进行css压缩. 目前可行的css压缩方案有: 1. postcss-loader with cssnano or u ...
- 四连测Day3
题目链接:https://pan.baidu.com/s/1_vsHfMI_qO-9IDxmFLkHfg 密码: uza8 T1: 小奥的一笔画,判连通性,查奇偶点即可 #include<ios ...
- android脱壳之DexExtractor原理分析[zhuan]
http://www.cnblogs.com/jiaoxiake/p/6818786.html内容如下 导语: 上一篇我们分析android脱壳使用对dvmDexFileOpenPartial下断点的 ...
- hadoop配置文件详解、安装及相关操作
一. Hadoop伪分布配置 1. 在conf/hadoop-env.sh文件中增加:export JAVA_HOME=/home/Java/jdk1.6 2. 在c ...
- 学习opencv-------函数使用二(图像变换)
#include"cv.h" #include"highgui.h" using namespace cv; void CVFILTER2D(IplImage ...
- 002 第一个Python简易游戏
1.初始版本 print('---------------我爱鱼C工作室-------------') temp = input("不妨猜一下小甲鱼现在心里想的是0~10中哪个数字:&quo ...
- div模拟textarea在ios下不兼容的问题解决
今天发现一个好东西,赶紧记下来,我在用textarea的时候,想要自适应高度,这样就不会出现滚动条.网上找了很多,都是用div模拟的,但是好扯淡,div模拟的在ios下不能聚焦并且不能输入.真坑... ...