javascript适合移动端的日期时间拾取器
作者:lijiao 发布时间:2023-07-02 05:25:48
标签:javascript,移动端,日期拾取器
这是一个适合移动设备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适合移动端的日期时间拾取器就这样制作完成了,希望大家喜欢。
0
投稿
猜你喜欢
- 区块链包含彼此链接的区块列表.要存储整个列表,我们将创建一个名为TPCoins : 的列表变量;TPCoins = []我们还将编写一个名为
- 目的:此次实验目的是为了zabbix服务端能够实时监控某服务器上oracle实例能否正常连接环境:1、zabbix_server2、zabb
- 视频本教程的视频碰撞是怎么回事在上一次教程中,我们添加了图形,将精灵从普通矩形更改为更漂亮的PNG图像。然而,这带来了一个问题:有时游戏会认
- 1、df=DataFrame([{‘A':'11','B':'12'},{‘A
- 本文实例讲述了Python中的装饰器用法。分享给大家供大家参考。具体分析如下:这里还是先由stackoverflow上面的一个问题引起吧,如
- 看代码吧~def test(): return 1,2a, b = test()1 2a, _ = test()1
- import shutil高级的文件,文件夹,压缩包的处理模块,也主要用于文件的拷贝shutil.copyfileobj(fsrc,fdst
- VIM python下的一些关于缩进的设置:第一步: 打开终端,在终端上输入vim ~/.vimrc,回车。 第二步: 添加下面的文段:se
- 一、背景大家好,我是J哥。也许你还记得,前不久复旦大学一博士生写了130行Python代码,批量识别核酸截图内容的故事。当时还被人民日报公众
- python将数据换为txt的方法有很多,可以用xlrd库实现。本人比较懒,不想按太多用的少的插件,利用已有库pandas将excel文件转
- 无法远程登入MySQL数据库的几种解决办法方法一:尝试用MySQL Adminstrator GUI Tool登入MySQL Server,
- 场景:集团中心下发本省数据时,并未按地市、业务拆分,现需要按地市、业务拆分并分发到地市。本文利用Python的pandas包实现了以上场景。
- 引言“ 这是MySQL系列笔记的第一篇,文章内容均为本人通过实践及查阅资料相关整理所得,可用作新手入门指南,或
- 适合各种浏览器的js拖动层,ie,firefox等,调用方便!<!DOCTYPE HTML PUBLIC "-//W3C//
- 问题背景查询MySQL中用逗号分隔的字段【a,b,c】是否包含【a】场景模拟现有表【ec_logicplace】,如下图所示:要求判断数值【
- 木马原理:入侵者使用诸如ASP图片木马生成器之类的工具将一张正常的图片与一个ASP木马文件合并成一个图片文件(即将对网站有害的ASP代码插在
- 本文实例讲述了Python单向链表和双向链表原理与用法。分享给大家供大家参考,具体如下:链表是一种数据结构,链表在循环遍历的时候效率不高,但
- 打印100-999之间的回文数(即百位和个位的数字相等),并每10个打印一行i = 100x = 0 # 使用计数器,每10个换行打印whi
- 一、需求分析我们首先有一个成绩表单,但是学生的成绩是按照学号进行排序的,现在,我们希望清晰明了的知道每一个学生的名次,并且需要将学生按照成绩
- centos7之Python3.74安装安装版本:Python3.74系统版本:centos7系统默认安装Python2.7,保留。安装/u