日历

今天来看一下日历的使用，这个相对比较简单。

首先项目开始需要引进几个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>