手机日期控件mobiscroll
query Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件。以及各种滑动插件可以让用户很方便的只需要滑动数字既可以选择日期。Mobiscroll作为一款jQuery日期插件可以让用户自定义主题,完全通过CSS文件修改样式最近开发html5+css3手机APP经常用到的,觉得非常好用,兼容性又好,用户体验又很棒,所以就整理出来分享给大家,还支持设置皮肤、显示方式、日期选择模式、日期格式、语言、是否现在显示、显示的文本内容、开始年份、结束年份。
1.以下是日期控件的基本初始化:
$('#beginDate').mobiscroll().date({
theme: 'default',
lang: 'zh',
dateFormat : 'yy-mm-dd',
display: 'bubble'
});
注:theme属性可以改变控件的风格;lang属性可以改变语言;dateFormat属性控制显示日期的格式,如例子中的格式显示为2016-10-29。
2.如果要控制日期控件在一段区间内,可以向下面这样定义:
$('#endDate').mobiscroll().date({
theme: 'default',
lang: 'zh',
dateFormat : 'yy-mm-dd',
display: 'bubble',
minDate:new Date('2016-10-01'),
maxDate:new Date('2016-10-31')
});
注:minDate属性控制日期控件的最小日期,也就是向上翻的尽头;maxDate属性控制日期控件的最大日期,也就是向下饭的尽头。需注意一点设置最大最小日期 时入参必须是Date类型,否则无法显示效果。
3.如果只想显示年月而不要日的样式可以这样做:
$('#endDate').mobiscroll().date({
theme: 'default',
lang: 'zh',
dateFormat : 'yy-mm-dd',
onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; },
display: 'bubble',
minDate:new Date(newDateStart),
maxDate:new Date(newDateEnd)
});
注:onBeforeShow属相控制在日期控件显示之前对控件的操作,例子中的功能就是在日期控件显示之前将日滚轮去掉(PS:这个功能是我在网上找到的,在这里向那位大触致敬 手动敬礼)。
4.如果想要监听日期控件可以这样做:
$("#beginDate").bind("change", function(e) {
alert('红红火火恍恍惚惚');
});
官网网址:http://www.mobiscroll.com/
2、官网下载地址:https://code.google.com/archive/p/mobiscroll/downloads
3、百度云下载地址:http://pan.baidu.com/s/1dFICCjZ 提取密码:copz
4、百度云精简版下载:http://pan.baidu.com/s/1dERPKJn 提取密码:wc6o
5、多种滑动插件下载:https://demo.mobiscroll.com/#components
手机日期控件mobiscroll的更多相关文章
- 移动端日期控件 mobiscroll
Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.可以让用户很方便的只需要滑动数字既可以选择 ...
- FineUIPro v5.2.0已发布(jQuery升级,自定义图标,日期控件)
FineUIPro/MVC/Core/JS v5.2.0 已经于 2018-8-20 发布,官网示例已更新,如果大家在测试中发现任何问题,请回复本帖,谢谢了. 在线示例: FineUI Pro:htt ...
- mui 时间日期控件(浏览器上无法查看,在手机端可以点击)
<head> <meta charset="utf-8"> <meta name="viewport" content=" ...
- bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法
筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...
- my97DatePicker日期控件——日期输入框联动,使用focus使第二个输入框没展示出日期控件
描述问题场景: 1.jquery使用的版本是jquery-1.7.2.min.js 2.代码不是写在页面上的,是通过事件后追加的 <!DOCTYPE html> <html> ...
- 怎样使用My97日期控件
有网友说无法使用My97日期控件,Insus.NET测试一下,是可以正常使用了. 在ASP.NET MVC环境中测试. 去官网下载My97日期控件程序包: 下载解压之后,把程序的目录拷贝至projec ...
- jQuery Datepicker日期控件
datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...
- jQuery LayDate 日期控件
她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封 ...
- JQuery datepicker 日期控件设置
datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...
随机推荐
- 【2019.7.20 NOIP模拟赛 T2】B(B)(数位DP)
数位\(DP\) 首先考虑二进制数\(G(i)\)的一些性质: \(G(i)\)不可能有连续两位第\(x\)位和第\(x+1\)位都是\(1\).因为这样就可以进位到第\(x+2\)位.其余情况下,这 ...
- HDU 6298(数学)
题意是给出一个数,找出这个数的三个因子且这三个因子的和等于这个数,输出满足条件的乘积最大的一组因子的乘积,如果不存在这样的因子,就输出 -1. 第一次 wa 了,因为把题目中的 x | n 当做了位或 ...
- Paper | D3: Deep Dual-Domain Based Fast Restoration of JPEG-Compressed Images
目录 摘要 读后感 故事 深度双域法(D3) 发表于2016年CVPR. 摘要 既利用了CNN,又考虑了JPEG压缩的特性,解决JPEG图像去失真问题. 针对于压缩特性,作者考虑了JPEG压缩方案的先 ...
- Linux学习 (2) CentOS 6 虚拟机挂载磁盘
1.我们先创建1台CentOS 6.10的虚拟机 2.使用SSH登陆CentOS虚拟机,运行下面的命令: sudo tail -f /var/log/messages ls -l /dev/sd* 可 ...
- python学习笔记 - socket通信
socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. sock ...
- 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-in ...
- 使用CefSharp前端后台交换
原文:使用CefSharp在.NET中嵌入Google kernel 使用CefSharp可以在.NET轻松的嵌入Html,不用担心WPF与Winform 控件与它的兼容性问题,CefSharp大部分 ...
- Codeforces 1256A 1257A
题目链接:https://codeforces.com/problemset/problem/1256/A A. Payment Without Change time limit per test ...
- Vue-组件模板抽离的写法
VUE的模板分离写法. 1.第一种(不常用) <script type="text/x-template" id="myCpm"> <div& ...
- 对于不返回任何键列信息的 SelectCommand,不支持 DeleteCommand 的动态 SQL 生成
VS新增操作数据库出现如下报错. 原因是数据库表未添加主键 MySQL: CREATE TABLE Customer (SID integer, Last_Name ), First_Name ), ...