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 相关文章推荐
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
JavaScript Array对象详解
Mar 01 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
python封装对象实现时间效果
2020/04/23 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
python实现数据图表
2017/07/29 Python
Django工程的分层结构详解
2019/07/18 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
2015年大学团支部工作总结
2015/05/13 职场文书
家装电话营销开场白
2015/05/29 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python