标签:
今天来看一下日历的使用,这个相对比较简单。
首先项目开始需要引进几个easyui的文件
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
下边是一个使用calendar的语句,只需要设置div的class即可,使用起来极其方便
<div class="easyui-calendar"></div>
下面看一个定制的calendar效果
<div class="easyui-calendar" data-options="formatter:formatDay"></div>
<script>
var d1=Math.floor((Math.random()*30)+1);//随机生成1-30的整数(Math.random()取值在0-1之间的浮点数)
var d2=Math.floor(Math.random()*30)+1);//随机生成1-30的整数(取小于这个数的最大整数)
function formatDay(date){
var m=date.getMonth()+1;//date.getMonth//获取某一月份,取出数为0-11,所以需要+1处理
var d=date.getDate();//获取某一天
var opts=$(this).calendar(‘options‘);//calendar的值
if(opts.month==m && d==d1){//如果当前月份等于calendar中的月份,且日期等于随机生成的日期d1
return‘<div class="icon-ok md">‘+d+‘</div>‘;
}
else if(opts.month==m && d==d2){//如果当前月份等于calendar中的月份,且日期等于随机生成的日期d2
return ‘<div class="icon-search md">‘+d+‘</div>‘;
}
return d;
}
</script>
<style scoped="scoped">
.md{
height:16px;
line-height:16px;
background-position:2px center;
text-align:right;
font-weight:bold;
padding:0 2px;
color:red;
}
</style>
下面是获取每周的第二天
<div class="easyui-calendar" data-options="
validator:function(date){
if(date.getDay()==1){
return true;
}
else{
return false;
}
}
"></div>
下面是通过选择器选择每周的第一天
<div >
<select onchange="$(‘#cc‘).calendar({firstDay:this.value})">
<option value="0">Sunday</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
</select>
</div>
<div id="cc" class="easyui-calendar"></div>
获取数据
<script>
$(function () {
$(‘#cc‘).click(function () {
alert($(‘#cc‘).calendar(‘options‘)[‘current‘]);//获取选中事件
alert($(‘#cc‘).calendar(‘options‘)[‘year‘]);
alert($(‘#cc‘).calendar(‘options‘)[‘month‘]); //还不知道怎么获取选中的哪一天
})
})
</script>
标签:
原文地址:http://www.cnblogs.com/hanlitao/p/4549725.html