码迷,mamicode.com
首页 > 其他好文 > 详细

Calendar-日历

时间:2015-06-03 18:59:47      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:

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

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

Calendar-日历

标签:

原文地址:http://www.cnblogs.com/hanlitao/p/4549725.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!