手机日期控件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 ...
随机推荐
- Programming | 获取图像频域并分解为高低频
1. DCT变换 参考:https://stackoverflow.com/questions/22322427/decomposing-an-image-into-two-frequency-com ...
- Token认证,如何快速方便获取用户信息
背景 我们有一个Web项目,这个项目提供了很多的Rest API.也做了权限控制,访问API的请求必须要带上事先认证后获取的Token才可以. 认证的话就在Filter中进行的,会获取请求的Token ...
- mysql小知识点汇总---(时间与时间戳的转换, 修改mysql用户名密码, navicate 导入sql文件报错 1153)
1. 时间与时间戳的转换 1.1 时间戳转时间 FROM_UNIXTIME(add_time, '%Y-%m-%d') 1.2 时间转时间戳 UNIX_TIMESTAMP('2015-04-29') ...
- 第四节:Geo类型介绍以及Redis批量操作、事务、分布式锁
一. Geo类型 1. 类型说明 Geo 是 Redis 3.2 版本后新增的数据类型,用来保存兴趣点(POI,point of interest)的坐标信息.可以实现计算两 POI 之间的距离.获取 ...
- 使用 jQuery.TypeAhead 让文本框自动完成 (一)(最简单的用法)
项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...
- Spring Security OAuth2 Demo —— 客户端模式(ClientCredentials)
前情回顾 前几节分享了OAuth2的流程与其它三种授权模式,这几种授权模式复杂程度由大至小:授权码模式 > 隐式授权模式 > 密码模式 > 客户端模式 本文要讲的是最后一种也是最简单 ...
- rsync性能终极优化【Optimize rsync performance】
前言 将文件从一台计算机同步或备份到另一台计算机的快速简便的方法是使用rsync.我将介绍通常用于备份数据的命令行选项,并显示一些选项以极大地将传输速度从大约20-25 MB / s加快到90 MB ...
- Python - 面向对象 - 第二十天
Python 面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触过 ...
- Visual Studio警告IDE0006的解决办法 引用的dll或者包出现黄色叹号
首先这种错误,一般是web项目出现的. 一.按照微软官方给的解决方案,查找错误日志: 1. 关闭 Visual Studio. 删除解决方案下的.vs文件夹,这个文件夹默认是隐藏的,找不到的需要打开隐 ...
- Struts2框架简单介绍
如需,了解Struts2详情,请点击,传送门 工作原理 在Struts2 框架中的处理大概分为以下步骤: 1.客户端初始化一个指向servlet容器(例如Tomcat)的请求. 2.这个请求经过一系列 ...