easyUI入门《二十三、calendar基础：日历与时间》

最新推荐文章于 2021-04-07 09:55:15 发布

leijiahui

最新推荐文章于 2021-04-07 09:55:15 发布

阅读量348

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/leijiahui/article/details/82502055

版权

easyUI 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入基本库-->
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" />
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/icon.css" />
	</head>

	<body>
		<!--
			跳转到对应天数
			设置第一天是周日还是周一
		-->
		<p>跳转到对应天数+设置第一天是周日还是周一</p>
		<div class="easyui-calendar" style="width: 180px;height: 180px;"></div>
		<div id="cal">

		</div>
		<input type="button" value="跳转2015-05-01" onclick="$('#cal').calendar('moveTo',new Date(2015,5,1))" />
		<script type="text/javascript">
			$(function() {
				$("#cal").calendar({
					firstDay: 1,
					onSelect: function(date) {
						alert(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate())
					}
				})
			})
		</script>

		<!--
			修改日期格式
		-->

		<br /><br /><br /><br />
		<p>修改日期格式</p>
		<input class="easyui-datebox" type="text" />

		<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,required:true"></input>

		<script type="text/javascript">
			function myformatter(date) {
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				var d = date.getDate();
				return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
			}

			function myparser(s) {
				if(!s) return new Date();
				var ss = (s.split('-'));
				var y = parseInt(ss[0], 10);
				var m = parseInt(ss[1], 10);
				var d = parseInt(ss[2], 10);
				if(!isNaN(y) && !isNaN(m) && !isNaN(d)) {
					return new Date(y, m - 1, d);
				} else {
					return new Date();
				}
			}
		</script>

		<br /><br /><br /><br />
		<p>限定选择的日期</p>
		<input id="dd" type="text" />
		<script type="text/javascript">
			$(function() {
				$("#dd").datebox({
					required: true
				});
				$("#dd").datebox().datebox("calendar").calendar({
					validator: function(date) {
						var now = new Date();
						return date > now;
					}
				})
			})
		</script>

		<br /><br /><br /><br />
		<p>显示时分秒</p>
		<input class="easyui-datetimebox" required style="width:200px">

		<br /><br /><br /><br />
		<p>赋值与取值</p>
		<input id="dd2" class="easyui-datetimebox" required style="width:300px">
		<input type="button" value="赋值" onclick="$('#dd2').datetimebox('setValue','2017-09-10 10:09:10')" />
		<input type="button" value="取值" onclick="alert($('#dd2').datetimebox('getValue'))" />
	</body>

</html>

leijiahui

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyUI入门《二十三、calendar基础：日历与时间》

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;!--引入基本库--&gt; &lt;script type="text/javascr
复制链接

扫一扫

专栏目录