移动端mobiscroll时间控件的使用

最近需要实现一个在手机上选择时间的功能，当然首先想到的就是时间控件的使用，最后找到一个相对比较合适，在此记录一下。

相关例子代码：

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"><title>jQuery移动端触屏滑动日期控件</title><script src="js/jquery-1.10.0.min.js"></script><script src="js/mobiscroll_002.js" type="text/javascript"></script><script src="js/mobiscroll_004.js" type="text/javascript"></script><link href="css/mobiscroll_002.css" rel="stylesheet" type="text/css"><link href="css/mobiscroll.css" rel="stylesheet" type="text/css"><script src="js/mobiscroll.js" type="text/javascript"></script><script src="js/mobiscroll_003.js" type="text/javascript"></script><script src="js/mobiscroll_005.js" type="text/javascript"></script><link href="css/mobiscroll_003.css" rel="stylesheet" type="text/css"><script type="text/javascript">$(function(){var currYear = (new Date()).getFullYear();    var opt={};opt.date = {preset : 'date'};opt.datetime = {preset : 'datetime'};opt.time = {preset : 'time'};opt.default = {theme: 'android-ics light', //皮肤样式display: 'modal', //显示方式 mode: 'scroller', //日期选择模式dateFormat: 'yyyy-mm-dd',lang: 'zh',showNow: true,nowText: "今天",startYear: currYear - 10, //开始年份endYear: currYear + 80 //结束年份};$("#EndDate").mobiscroll($.extend(opt['date'], opt['default']));//年月日型var optDateTime = $.extend(opt['datetime'], opt['default']);var optTime = $.extend(opt['time'], opt['default']);$("#AbsentEndDate").mobiscroll(optDateTime).datetime(optDateTime);//年月日时分型$("#EndTime").mobiscroll(optTime).time(optTime);//时分型});</script>
</head><body><div style="text-align:center;"><h2>时间控件</h2><div><label>日期:</label><input id="EndDate" runat="server"  readonly="readonly" style="width:30%;" /></div> <br /><div><label>日期:</label><input id="EndTime" runat="server"  readonly="readonly" style="width:30%;" /></div><br /><div><label>日期时间:</label><input id="AbsentEndDate" runat="server"  readonly="readonly" style="width:28%"/></div></div>
</body>
</html></span>

效果图：

实例和需要的js及css文件：时间控件实例，需要的话自取。

移动端mobiscroll时间控件的使用相关推荐

python+selenium：移除时间控件readonly属性，实现send_keys输入
参考博客: python+selenium:web端关闭时间控件readonly属性,可直接输入[今天][昨天][任意]时间类似这样的时间戳控件: 可以看到控件有:readonly 属性[只读] 一 ...
laydate 时间控件去掉秒以及解决在移动端不能滑动的问题
一.时间控件去掉秒,保留时分二.时间控件在移动端不能滚动一.时间控件去掉秒,保留时分方法一:使用 ready 回调函数 ready 控件在打开时触发.打开控件时让秒消失. <script& ...
vue时间控件美化成IOS样式(移动端)，vux组件datatime添加星期几/周几教程
input的时间控件有三种类型属性 Android IOS type="date" 年+月+日(原生UI样式) 年+月+日(滚轮样式) type="datetime&q ...
收集几个js实现的日期时间控件
/**//** *大部分代码来自meizz的日历控件. *tiannet添加了时间选择功能.select,object标签隐藏功能,还有其它小功能. *使用方法: * (1)只选择日期 & ...
html下拉框只选择年份和月份,有只显示年和月的javascript时间控件吗？
//包含js文件 (1)只选择日期 (2)选择日期和小时 (3)选择日期和小时及分钟 //调用函数这下面是setmonth.js 这是Calendar.js /**//** *本日历选择控件由tia ...
elementui时间控件限制可选时间范围(精确到时分秒)
elementui时间控件限制可选时间范围(精确到时分秒) 我们在开发web端项目时,时间控件用的非常多,限制可选时间也是比较常见的需求,比如已经过去时间不能选,或这未来的时间不可选等,如果仅仅只是限 ...
bootstrap-datetimepicker时间控件添加清除按钮
本文转自:https://blog.csdn.net/gyysmile/article/details/80226993 其实这位大神写的很好了,为什么我还要在写呢,因为我想写点东西了最近测试部提出 ...
python日历gui_python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例...
PyQt5日期时间控件QDateTimeEdit介绍 QDateTimeEdit是一个允许用户编辑日期时间的控件,可以使用键盘上的上下键头按钮来增加或减少日期的时间值,QDateTimeEdit通过s ...
robotframe使用之时间控件
robotframe使用之时间控件正常的页面,时间控件会写在一个iframe里面,所以robotframework找不到对的ID或者xpath等. 要解决这个问题必选先显示iframe. 使用关键字 ...

移动端mobiscroll时间控件的使用

移动端mobiscroll时间控件的使用相关推荐

最新文章

热门文章