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 相关文章推荐
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
vue实现标签云效果的示例
Nov 09 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
php实用代码片段整理
2016/11/12 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
javascript 实现map集合
2015/04/03 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python中使用模块的教程
2015/04/27 Python
Python使用gensim计算文档相似性
2016/04/10 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
浅析Python requests 模块
2020/10/09 Python
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
校园歌手大赛策划书
2014/01/17 职场文书
派出所所长先进事迹
2014/05/19 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
高三英语复习计划
2015/01/19 职场文书
人民币使用说明书
2019/04/17 职场文书
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫