jQuery移动端选择输入日期时间

效果体验:http://keleyi.com/keleyi/phtml/yidong/1.htm

请使用支持HTML5的浏览器查看效果。

以下是代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title>jQuery手机移动端日期选择输入 - 柯乐义</title>
<link href="http://keleyi.com/keleyi/phtml/yidong/1/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/yidong/1/date.js" ></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/yidong/1/iscroll.js" ></script>
<script type="text/javascript">
$(function(){
$('#beginTime').date();
$('#endTime').date({theme:"datetime"});
});
</script>
</head>
<body> 
<style type="text/css">
.demo{width:300px;margin:40px auto 0 auto;}
.demo .lie{margin:0 0 20px 0;}
</style>
<h2>jQuery手机移动端日期选择输入</h2>
<div class="demo">
<div class="lie">日期设置-1:<input id="beginTime" class="kbtn" /></div>
<div class="lie">日期设置-2:<input id="endTime" class="kbtn" /></div>
</div>
<div id="datePlugin"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
点击文本框,然后在弹出对话框上下拖动个选项进行选择,然后点击“确定”按钮输入。
<p>来源:<a href="http://keleyi.com/a/bjad/ujr7jlui.htm" target="_blank">原文</a></p>
</div>
</body>
</html>

 

http://keleyi.com/a/bjad/ujr7jlui.htm

HTML5和CSS3知识和特效 http://ini.iteye.com/blog/2163592

你可能感兴趣的:(jquery,html5,css,css3,ini)