Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件。以及各种滑动插件

可以让用户很方便的只需要滑动数字既可以选择日期。Mobiscroll作为一款jQuery日期插件可以让用户自定义主题，完全通过CSS文件修改样式

最近开发html5+css3手机APP经常用到的，觉得非常好用，兼容性又好，用户体验又很棒，所以就整理出来分享给大家，还支持设置皮肤、显示方式、日期选择模式、日期格式、语言、是否现在显示、显示的文本内容、开始年份、结束年份

下面看看效果图：

1、

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><link href="css/mobiscroll.css" rel="stylesheet" />
<link href="css/mobiscroll_date.css" rel="stylesheet" />
<title>移动设备的日期选择jquery插件</title>
</head><body><section id="form"><form action=""><label>出生日期：</label><input type="text" name="USER_AGE" id="USER_AGE" readonly class="input" placeholder="请填写你的出生日期" /><div class="clear h10"></div><input type="submit" id="tj" class="submit" value="提交" /></form></section>
<script src="js/jquery.min.js"></script>
<script src="js/mobiscroll_date.js" charset="gb2312"></script>
<script src="js/mobiscroll.js"></script>
<script type="text/javascript">
$(function () {var currYear = (new Date()).getFullYear();    var opt={};opt.date = {preset : 'date'};opt.datetime = {preset : 'datetime'};opt.time = {preset : 'time'};opt.default = {theme: 'android-ics light', //皮肤样式display: 'modal', //显示方式 mode: 'scroller', //日期选择模式dateFormat: 'yyyy-mm-dd',lang: 'zh',showNow: true,nowText: "今天",startYear: currYear - 50, //开始年份endYear: currYear + 10 //结束年份};$("#USER_AGE").mobiscroll($.extend(opt['date'], opt['default']));});
</script></body>
</html>

demo下载地址：http://pan.baidu.com/s/1hs0V7AO 提取密码：v5s3

2、

4、

部分精简代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"><title>Mobiscroll日期时间中文精简实例 </title><script src="dev/jquery-1.9.1.js"></script><script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script><script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script><link href="dev/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" /><link href="dev/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" /><script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script><script src="dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script><!-- S 可根据自己喜好引入样式风格文件 --><script src="dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script><link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" /><!-- E 可根据自己喜好引入样式风格文件 --><style type="text/css">body {padding: 0;margin: 0;font-family: arial, verdana, sans-serif;font-size: 12px;background: #ddd;}input, select {width: 100%;padding: 5px;margin: 5px 0;border: 1px solid #aaa;box-sizing: border-box;border-radius: 5px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-webkit-border-radius: 5px;}.header {border: 1px solid #333;background: #111;color: white;font-weight: bold;text-shadow: 0 -1px 1px black;background-image: linear-gradient(#3C3C3C,#111);background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));background-image: -moz-linear-gradient(#3C3C3C,#111);}.header h1 {text-align: center;font-size: 16px;margin: .6em 0;padding: 0;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}.content {padding: 15px;background: #fff;}</style><script type="text/javascript">$(function () {var currYear = (new Date()).getFullYear();    var opt={};opt.date = {preset : 'date'};//opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };opt.datetime = {preset : 'datetime'};opt.time = {preset : 'time'};opt.default = {theme: 'android-ics light', //皮肤样式display: 'modal', //显示方式 mode: 'scroller', //日期选择模式lang:'zh',startYear:currYear - 10, //开始年份endYear:currYear + 10 //结束年份};$("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));var optDateTime = $.extend(opt['datetime'], opt['default']);var optTime = $.extend(opt['time'], opt['default']);$("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);$("#appTime").mobiscroll(optTime).time(optTime);//下面注释部分是上面的参数可以替换改变它的样式//希望一起研究插件的朋友加我个人QQ也可以，本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。// 直接写参数方法//$("#scroller").mobiscroll(opt).date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });//具体参数定义如下//{//preset: 'date', //日期类型--datatime --time,//theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】//【wp light】【wp】//mode: "scroller",//操作方式【scroller】【clickpick】【mixed】//display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】//dateFormat: 'yyyy-mm-dd', // 日期格式//setText: '确定', //确认按钮名称//cancelText: '清空',//取消按钮名籍我//dateOrder: 'yymmdd', //面板中日期排列格//dayText: '日', //monthText: '月',//yearText: '年', //面板中年月日文字//startYear: (new Date()).getFullYear(), //开始年份//endYear: (new Date()).getFullYear() + 9, //结束年份//showNow: true,//nowText: "明天",  ////showOnFocus: false,//height: 45,//width: 90,//rows: 3}});</script>
</head><body><div class="header"><h1>Mobiscroll精简实例</h1></div><div class="content"><div class="demos"><label for="appDate">日期</label><input type="text" name="appDate" id="appDate" /></div><div class="demos"><label for="appDateTime">日期时间</label><input type="text" name="appDateTime" id="appDateTime" /></div><div class="demos"><label for="appTime">时间</label><input type="text" name="appTime" id="appTime" /></div></div></body>
</html>

相关链接：

1、官网网址：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

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件相关推荐

jQuery实现移动端手机选择日期日历插件
效果图 calendar.css html, body {color: #333;margin: 0;height: 100%;font-family: "Microsoft YaHei&q ...
每日分享，三款纯jquery移动端日期时间选择插件
序言:mm再也不用担心我找不到合适好看的日期选择插件了,今天分享三款纯jquery移动端日期时间选择插件,赶紧点赞收藏转发吧. 一.jQuery移动端触屏滑动时间日期选择插件简介:jQuery移动端 ...
30个基于jQuery的日期时间选择插件
今天给大家分享30个非常酷的基于jQuery的日期时间选择插件,这是在国外的一个网站看到的,于是就稍作翻译,拿出来与大家分享,英文原文地址:http://www.1stwebdesigner.com/ ...
jquery日期插件_AngularJS 日期时间选择组件（附详细使用方法）
插件简介 AngularJS是一款目前非常火的JavaScript脚本库,应用范围十分广阔.今天给大家分享一款基于AngularJS和jQuery的日期时间选择组件,和别的日期选择插件一样,它同样支持 ...
jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件
jquery插件课程1 幻灯片.城市选择.日期时间选择.拖放.方向拖动插件一.总结一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...
Java项目:手机WAP版外卖订餐系统(java+SSM+jsp+jquery+mysql)
源码获取:博客首页 "资源" 里下载! jsp+ssm框架实现手机WAP版外卖订餐系统项目介绍这是一款由jsp+ssm框架(spring.springMVC.mybaits)实 ...
手机wap网站建置方案
开发案例 0 引言手机的功能从简单的语音通信和文字短信, 发展到现在的彩信.多媒体.无线上网??用户能够通过手机来实现各种交换和获取丰富的信息资源.WAP (Wireless Applicati ...
jquery mobiscroll
mobiscroll.android-ics-2.5.2.js 配置文件修改下拉框宽高时不要去修改样式,直接配置即可,有时配置出来的宽度在火狐跟谷歌浏览器上差异很大,可以在逻辑界面直接设置下拉框的宽 ...
响应html广告区分手机pc,typecho博客判断电脑PC和手机WAP端进行广告展示
特别声明:本文为原创,可自由转载.引用,但需署名作者且注明文章出处,如有侵权请联系! 上一篇文章详细介绍了个人网站typecho博客申请添加投放百度联盟广告的具体步骤https://www.zyglz ...

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件相关推荐

最新文章

热门文章