javascript适合移动端的日期时间拾取器
作者:lijiao 时间:2023-07-02 05:25:48
这是一个适合移动设备WEB应用的日期和时间拾取器,在桌面版的日期拾取器我们一般用jQuery UI的datepicker插件,而移动手机版的日期拾取器则可以根据项目需求选择与jQuery Mobile配合的mobiscroll.js插件,它提供了友好的日期和时间选择操作界面,且易于配置和使用。
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,移动端,日期拾取器
0
投稿
猜你喜欢
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2023-11-21 23:08:28
纯ASP结合VML生成完美图-折线图
2010-05-11 16:50:00
20个优秀网站助你征服CSS[译]
2008-09-21 13:21:00
MySQL模式 Strict Mode知识点详解
2024-01-27 20:50:41
SQLServer 游标简介与使用说明
2009-07-02 13:53:00
JS 判断undefined的实现代码
2024-04-19 09:53:58
linux配置mysql数据库远程连接失败的解决方法
2024-01-28 06:53:59
Dreamweaver使用中的7个常见问题与解答
2007-11-03 11:34:00
Asp测试网速代码(带进度条)
2007-11-12 13:09:00
ASP与MySQL的连接[图文教程]
2010-03-14 11:21:00
Python ATM功能实现代码实例
2022-10-05 04:48:23
Java实现飞机大战-连接数据库并把得分写入数据库
2024-01-26 19:16:54
IntelliJ IDEA卡死,如何优化内存
2023-07-04 12:10:27
python PyTorch参数初始化和Finetune
2023-04-26 08:53:44
Python 操作Excel-openpyxl模块用法实例
2021-01-20 09:29:34
Django 删除upload_to文件的步骤
2022-03-23 05:47:14
Python之时间和日期使用小结
2021-01-11 09:33:21
ASP初学者常犯的几个错误
2007-09-07 10:19:00
简单仿LightBox效果
2008-09-19 21:35:00
总结Python编程中三条常用的技巧
2022-06-04 05:52:04