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 常用校验函数
Mar 26 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 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不使用插件导出excel的简单方法
2014/03/04 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
基于jQuery架构javascript基础体系
2011/01/01 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
python安装与使用redis的方法
2016/04/19 Python
python:socket传输大文件示例
2017/01/18 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python分支结构(switch)操作简介
2018/01/17 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
中专生求职自荐信范文
2013/12/22 职场文书
化验室技术员岗位职责
2013/12/24 职场文书
入党转预备思想汇报
2014/01/07 职场文书
个人授权委托书样本
2014/09/13 职场文书
见习报告的格式
2014/11/04 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书