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的更多相关文章

  1. 移动端日期控件 mobiscroll

    Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.可以让用户很方便的只需要滑动数字既可以选择 ...

  2. FineUIPro v5.2.0已发布(jQuery升级,自定义图标,日期控件)

    FineUIPro/MVC/Core/JS v5.2.0 已经于 2018-8-20 发布,官网示例已更新,如果大家在测试中发现任何问题,请回复本帖,谢谢了. 在线示例: FineUI Pro:htt ...

  3. mui 时间日期控件(浏览器上无法查看,在手机端可以点击)

    <head> <meta charset="utf-8"> <meta name="viewport" content=" ...

  4. bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法

    筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...

  5. my97DatePicker日期控件——日期输入框联动,使用focus使第二个输入框没展示出日期控件

    描述问题场景: 1.jquery使用的版本是jquery-1.7.2.min.js 2.代码不是写在页面上的,是通过事件后追加的 <!DOCTYPE html> <html> ...

  6. 怎样使用My97日期控件

    有网友说无法使用My97日期控件,Insus.NET测试一下,是可以正常使用了. 在ASP.NET MVC环境中测试. 去官网下载My97日期控件程序包: 下载解压之后,把程序的目录拷贝至projec ...

  7. jQuery Datepicker日期控件

    datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...

  8. jQuery LayDate 日期控件

    她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封 ...

  9. JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

随机推荐

  1. ASP.NET开发实战——(十三)ASP.NET MVC 与数据库之EF实体类与数据库结构

    大家都知道在关系型数据库中每张表的每个字段都会有自己的属性,如:数据类型.长度.是否为空.主外键.索引以及表与表之间的关系.但对于C#编写的类来说,它的属性只有一个数据类型和类与类之间的关系,但是在M ...

  2. Luogu P4068 [SDOI2016]数字配对

    反正现在做题那么少就争取做一题写一题博客吧 看到题目发现数字种类不多,而且结合价值的要求可以容易地想到使用费用流 但是我们如果朴素地建图就会遇到一个问题,若\(i,j\)符合要求,那么给\(i,j\) ...

  3. USB鼠标抓包数据(转)

    https://blog.csdn.net/zqixiao_09/article/details/53056854

  4. java.sql.SQLException: Could not establish connection to 192.168.8.111:10000/default: java.net.ConnectException: Connection refused: connect at org.apache.hadoop.hive.jdbc.HiveConnection.<init>(HiveC

    java.sql.SQLException: Could not establish connection to 192.168.8.111:10000/default: java.net.Conne ...

  5. Salesforce学习之路(八)一次拉取多个文件或全部文件至本地

    在开发中,经常会遇到本地工程错乱或者误操作导致本地本地项目被删除,此时利用SFDX: Retrieve Source from Org只会拉取新建并且名称相同的组件,若通过创建一个个文件,然后再拉取的 ...

  6. Focal Loss 理解

    本质上讲,Focal Loss 就是一个解决分类问题中类别不平衡.分类难度差异的一个 loss,总之这个工作一片好评就是了. 看到这个 loss,开始感觉很神奇,感觉大有用途.因为在 NLP 中,也存 ...

  7. win10每次开机都会自检系统盘(非硬件故障)——解决方案2019.07.12

    1.最近反复遇到了这个问题,之前遇到这个问题就把系统重装了,没想到今天又遇到了,目前系统东西太多了,重装太麻烦了,就下决心解决一下. 2.不要使用网络上流传的修改注册表的方案,把注册表的那个键值删除那 ...

  8. Sitecore 8.2 渠道简介

    渠道是联系人通过广告系列或面对面与您的品牌互动时所使用的路径.联系人可以通过手机上的应用与您的品牌互动,点击社交网络上的广告访问您的网站,或访问实体店购买商品.使用Sitecore体验平台,您可以使用 ...

  9. 2、Ext.NET 1.7 官方示例笔记-按钮

    这一节应该比较简单,因为按钮相对其他控件还是比较简单的,但按钮是最常用的控件,先从简单的开始,才能循序渐进的学下去不是吗? 从上面的图片可以看出,可分基本&按钮组,先看下基本的Overview ...

  10. C# - VS2019调用AForge库实现调用摄像头拍照功能

    前言 作为一名资深Delphi7程序员,想要实现摄像头扫描一维码/二维码功能,发现所有免费的第三方库都没有简便的实现办法,通用的OpenCV或者ZXing库基本上只支持XE以上的版本,而且一维码的识别 ...