javascript适合移动端的日期时间拾取器


Posted in Javascript onNovember 10, 2015

这是一个适合移动设备WEB应用的日期和时间拾取器,在桌面版的日期拾取器我们一般用jQuery UI的datepicker插件,而移动手机版的日期拾取器则可以根据项目需求选择与jQuery Mobile配合的mobiscroll.js插件,它提供了友好的日期和时间选择操作界面,且易于配置和使用。

javascript适合移动端的日期时间拾取器

HTML
首先我们加载相关插件和样式文件,该插件基于jQuery和jQuery.mobile所以首先需要加载这两个库文件,然后再加载mobiscroll.js插件以及相关CSS文件。

<script src="js/jquery.min.js"></script> 
<script src="js/jquery.mobile-1.3.0.min.js"></script> 
<script src="js/mobiscroll.js" type="text/javascript"></script> 
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />

接着在body里放置输入框,这是一个普通的文本输入框,当鼠标单击输入框获得光标时会触发mobiscroll弹出日期拾取器。

<input id="date" name="date" />

JavaScript
mobiscroll提供了许多选项可以设置,包括定义弹出面板展示方式、最大日期、最小日期、日期格式、结束年份等,也可以将插件本地化,包括设置中文按钮、说明。调用也非常简单,以下是示例代码:

$(function(){ 
 var opt = { 
 preset: 'date', //日期 
 theme: 'sense-ui', //皮肤样式 
 display: 'modal', //显示方式 
 mode: 'scroller', //日期选择模式 
 dateFormat: 'yy-mm-dd', // 日期格式 
 setText: '确定', //确认按钮名称 
 cancelText: '取消',//取消按钮名籍我 
 dateOrder: 'yymmdd', //面板中日期排列格式 
 dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字 
 hourText: '时',minuteText: "分",ampmText:"上午/下午", 
 endYear:2020 //结束年份 
 }; 
 $("#date").mobiscroll().date(opt); 
});

如果只选是时间,则可以这样写:

$("#time").mobiscroll().time(opt);

如果要在面板上显示日期和时间,则这样调用:

$("#datetime").mobiscroll().datetime(opt);

源码下载:javascript适合移动端的日期时间拾取器

一款简洁大方的javascript适合移动端的日期时间拾取器就这样制作完成了,希望大家喜欢。

Javascript 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
js图片轮播手动切换效果
Nov 10 #Javascript
JS截取与分割字符串常用技巧总结
Nov 10 #Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 #Javascript
纯javascript响应式树形菜单效果
Nov 10 #Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 #Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 #Javascript
3种js实现string的substring方法
Nov 09 #Javascript
You might like
第十二节--类的自动加载
2006/11/16 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python机器学习之KNN分类算法
2018/08/29 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
护士检查书
2014/01/17 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
警告通知
2015/04/25 职场文书
婚庆司仪开场白
2015/05/29 职场文书
车辆挂靠协议书
2016/03/23 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
golang定时器
2022/04/14 Golang