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 运算数的求值顺序
Aug 23 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 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
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
摘自启点的main.js
2008/04/20 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
使用Python对MySQL数据操作
2017/04/06 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
审计工作个人的自我评价
2013/12/25 职场文书
揠苗助长教学反思
2014/02/04 职场文书
物理力学求职信
2014/02/18 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
司法建议书范文
2014/05/13 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS