移动端mobiscroll时间控件的使用

移动端mobiscroll时间控件的使用相关js代码:$(function(){ varcurrYear=(newDate()).getFullYear(); varopt={}; opt.date={preset:’date’}; opt.datetime={pres

大家好,又见面了,我是你们的朋友全栈君。

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

        相关例子代码:

<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>

        效果图:

移动端mobiscroll时间控件的使用

移动端mobiscroll时间控件的使用

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/142287.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Ags 9.3 文档逐步上线

    Ags 9.3 文档逐步上线

  • 3分钟教你子网划分–(内含习题讲解)

    3分钟教你子网划分–(内含习题讲解)一.IPV41.IP地址IP地址分为IPV4和IPV6,但现在目前大家所常用的为IPV4。IPV4是由32位二进制数组成,分成四组,每组八位。例如:11000000111100000000000000000000为了便于配置通常表示成点分十进制例如:192.168.1.1IPV6由128位组成,一般用冒号分隔,十六进制表示2.IPV4地址组成IPV4是由两部分组成,即:网络部分(NETWORK)主机部分(HOST)例:192.168.1.132网络部分:192.168.1

  • 可视化报表开发_可视化数据报表

    可视化报表开发_可视化数据报表当今时代,传统的报表工具已经很难满足人们对于数据可视化的期望了,而大数据处理工具却可以为人们提供了更多的选择。微金时代的RDP报表工具操作简便,可直接上手使用,无需编码,就可以制作各种复杂、炫酷的报表。RDP报表工具表格式报表功能和亮点根据中国特色的报表需求,研发出的轻量级的企业级Web报表工具。仅需简单拖拽式配置,即可制作出各种复杂、炫酷的报表。支持中国式复杂报表的处理,例如:Excel清单报表、交叉报表、分组报表、多源分片式报表、分块报表、表单报表、图形报表、回写报表、假设分析报表、二次.

  • 虚拟机docker安装RabbitMQ[通俗易懂]

    虚拟机docker安装RabbitMQ[通俗易懂]官方下载地址选择使用Docker安装(选择带有management是含有管理界面的)拉取镜像和启动:dockerrun-d–hostnamemy-rabbit-p5672:5672-p15672:15672rabbitmq:3.8.0-beta.4-management浏览器访问:虚拟机ip:15672默认账号密码都是guest…

  • VIM命令模式与输入模式切换

    VIM命令模式与输入模式切换

    2021年10月11日
  • 小旋风asp服务器出错_小旋风服务器用来干什么的

    小旋风asp服务器出错_小旋风服务器用来干什么的 点击是出现下列的对话框:可能是因为因为开着迅雷,因为迅雷是用的80号端口,可以关了迅雷试试,

    2022年10月24日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号