5. Basic Calendar - jQuery EasyUI Demo</title" />
<meta name="applicable-device" content="pc" />
<link rel="stylesheet" href="https://assets.doczj.com/biz/css/style.css?v=1129" type="text/css" />
<link rel="stylesheet" href="https://assets.doczj.com/dev-biz/css/doc.css" type="text/css" />
<script src="https://assets.doczj.com/biz/js/common.js?v=1129"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
#menu li a.current, #menu li a {
width: 131px;
}
</style>
</head>
<body>
<div id="header" class="clearfix">
<div class="logo">
<a href="//biz.doczj.com/">
<img alt="文档之家" src="https://assets.doczj.com/biz/images/Logo.jpg">
</a>
</div>
<div class="doc"><h1>e商务文档</h1></div>
<div class="search">
<form action="/wendang/" method="get">
<input type="text" name="q" id="q" size="60" />
<input type="button" value="文档搜索" class="btn" />
<input type="hidden" name="s" value="search" />
</form>
</div>
</div>
<div id="menu" class="clearfix">
<ul>
<li><a href="/topic/21325148/" class="current">房屋租赁合同</a></li>
<li><a href="/topic/16071968/">商铺租赁合同</a></li>
<li><a href="/topic/10464402/">股权转让合同</a></li>
<li><a href="/topic/13616391/">商品买卖合同</a></li>
<li><a href="/topic/21669309/">工程施工合同</a></li>
<li><a href="/topic/10463621/">建设工程合同</a></li>
<li><a href="/topic/15242927/">土地承包合同</a></li>
<li><a href="/topic/16270187/">个人借款合同</a></li>
<li><a href="/topic/98888/">财产信托合同</a></li>
</ul>
</div>
<div class="view content clearfix">
<div class="article">
<div class="position">当前位置：<a href="/">文档之家</a>› easyui控件实例之Calendar日历</div>
<h1 class="title">easyui控件实例之Calendar日历</h1>
<div><p>源码如下：1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>Basic Calendar - jQuery EasyUI Demo</title> 6.<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7.<link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8.<link rel="stylesheet" type="text/css" href="../demo.css"> 9.<script type="text/javascript" src="../../jquery.min.js"></script> 10.<script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11.</head> 12.<body> 13.<h2>Basic Calendar</h2> 14.<p>Click to select date.</p> 15.<div style="margin:20px 0"></div> 16.<div class="easyui-calendar" style="width:250px;height:250px;"></div> 17.18.</body> 19.</html>源码如下：1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>First Day of Week - jQuery EasyUI Demo</title> 6.<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7.<link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8.<link rel="stylesheet" type="text/css" href="../demo.css"> 9.<script type="text/javascript" src="../../jquery.min.js"></script> 10.<script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11.</head> 12.<body> 13.<h2>First Day of Week</h2> 14.<p>Choose the first day of the week.</p> 15.16.<div style="margin:20px 0"> 17.<select onchange="$('#cc').calendar({firstDay:this.value})"> 18.<option value="0">Sunday</option> 19.<option value="1">Monday</option> 20.<option value="2">Tuesday</option>Calendar 日历控件基本基本实现实现自定自定义义星期几作星期几作为为日历排列的第一天 设置星期几作为日历显示中的第一天.Sunday21.<option value="3">Wednesday</option> 22.<option value="4">Thursday</option> 23.<option value="5">Friday</option> 24.<option value="6">Saturday</option> 25.</select> 26.</div> 27.28.<div id="cc" class="easyui-calendar" style="width:250px;height:250px;"></div> 29.</body> 30.</html>源码如下：1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>Custom Calendar - jQuery EasyUI Demo</title> 6.<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7.<link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8.<link rel="stylesheet" type="text/css" href="../demo.css"> 9.<script type="text/javascript" src="../../jquery.min.js"></script> 10.<script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11.</head> 12.<body> 13.<h2>Custom Calendar</h2> 14.<p>This example shows how to custom the calendar date by using 'formatter' function.</p> 15.<div style="margin:20px 0"></div> 16.17.<div class="easyui-calendar" style="width:250px;height:250px;" data-options="formatter:formatDay"></div> 18.19.<script> 20.var d1 = Math.floor((Math.random()*30)+1); 21.var d2 = Math.floor((Math.random()*30)+1); 22.function formatDay(date){ 23.var m = date.getMonth()+1; 24.var d = date.getDate(); 25.var opts = $(this).calendar('options'); 26.if (opts.month == m && d == d1){ 27.return '<div class="icon-ok md">' + d + '</div>'; 28.} else if (opts.month == m && d == d2){ 29.return '<div class="icon-search md">' + d + '</div>'; 30.} 31.return d; 32.} 33.</script> 34.<style scoped="scoped"> 35..md { 36.height: 16px; 37.line-height: 16px; 38.background-position: 2px center; 39.text-align: right; 40.font-weight: bold; 41.padding: 0 2px; 42.color: red; 43.} 44.</style> 45.</body> 46.</html>自定自定义义日历控件用'formatter'来自定义日历的显示.可以设计出自己喜欢的日历控件哦 禁用禁用选选中指定日期只允许用户选择指定的日期，这里演示只允许用户选择星期一.源码如下：1.<!DOCTYPE html>2.<html>3.<head>4. <meta charset="UTF-8">5. <title>Disable Calendar Date - jQuery EasyUI Demo</title>6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">8. <link rel="stylesheet" type="text/css" href="../demo.css">9. <script type="text/javascript" src="../../jquery.min.js"></script>10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>11.</head>12.<body>13. <h2>Disable Calendar Date</h2>14. <p>This example shows how to disable specified dates, only allows the user to select Mondays.</p>15. <div style="margin:20px 0"></div>16.17. <div class="easyui-calendar" style="width:250px;height:250px;" data-options="18. validator: function(date){19. if (date.getDay() == 1){20. return true;21. } else {22. return false;23. }24. }25. "></div>26.27.</body>28.</html>今年第几周显示选中日期是今年的第几周.源码如下：1.<!DOCTYPE html>2.<html>3.<head>4. <meta charset="UTF-8">5. <title>Week Number on Calendar - jQuery EasyUI Demo</title>6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">8. <link rel="stylesheet" type="text/css" href="../demo.css">9. <script type="text/javascript" src="../../jquery.min.js"></script>10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>11.</head>12.<body>13. <h2>Week Number on Calendar</h2>14. <p>This example shows how to display the week number on calendar.</p>15. <div style="margin:20px 0"></div>16. <div class="easyui-calendar" showWeek="true" weekNumberHeader="Wk" style="width:250px;height:250px;"></div>17.18.</body>19.</html>流体布局。</p></div>
<div class="doc-bg">
<div class="article-container" id="loader">
</div>
</div>
<div>
<div>相关主题</div>
<div class="relatedtopic">
<div id="tabs-section" class="tabs">
<ul class="tab-head">
</ul>
</div>
</div>
</div>
</div>
<div class="category">
<h2 class="navname">相关文档推荐：</h2>
<ul class="lista">
<li><a href="/doc/0917670660.html" target="_blank">excel中实现日期选择输入(日历控件)</a></li>
<li><a href="/doc/1e15224272.html" target="_blank">Excel日历控件教程 详细 </a></li>
<li><a href="/doc/1a18579145.html" target="_blank">方正日历插件使用说明</a></li>
<li><a href="/doc/281003924.html" target="_blank">日历控件使用方法</a></li>
<li><a href="/doc/2f3918481.html" target="_blank">日期js控件</a></li>
<li><a href="/doc/26804461.html" target="_blank">选择日期Excel日历控件将日期插入到指定单元格#精选.</a></li>
<li><a href="/doc/3912860384.html" target="_blank">Excel日历控件教程(详细)</a></li>
<li><a href="/doc/3413197534.html" target="_blank">Calendar(日历控件)</a></li>
<li><a href="/doc/4917255865.html" target="_blank">excel中实现日期选择输入(日历控件)</a></li>
<li><a href="/doc/4e17404687.html" target="_blank">axure实例教程制作日历控件选择日期</a></li>
</ul>
</div>
</div>
<script>
var sid = 12;
var did = "45784911";
var ext = 'pdf';
var docId = '1816peesjq2hdx6fhjykjym90g5h10sf';
var totalPage = 4;
</script>
<footer class="footer">
<p><a href="/tousu.html" target="_blank">侵权投诉</a> © 2023 biz.doczj.com</p>
<p>
<a href="https://beian.miit.gov.cn" target="_blank">闽ICP备18022250号-1</a> 本站资源均为网友上传分享，本站仅负责分类整理，如有任何问题可通过上方投诉通道反馈
<script>foot();</script>
</p>
</footer>
</body>
</html>