EasyUI中Calendar日历的简单使用

逃离我推掉我的手 2023-10-18 20:18 1阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 属性 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>number</td> 
   <td>日历（calendar）组件的宽度。</td> 
   <td>180</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>number</td> 
   <td>日历（calendar）组件的高度。</td> 
   <td>180</td> 
  </tr> 
  <tr> 
   <td>fit</td> 
   <td>boolean</td> 
   <td>当设置为 true 时，则设置日历的尺寸以适应它的父容器。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>boolean</td> 
   <td>定义是否显示边框。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>firstDay</td> 
   <td>number</td> 
   <td>定义每星期的第一天。星期日（Sunday）是 0，星期一（Monday）是 1，...</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>weeks</td> 
   <td>array</td> 
   <td>显示星期的列表。</td> 
   <td>['S','M','T','W','T','F','S']</td> 
  </tr> 
  <tr> 
   <td>months</td> 
   <td>array</td> 
   <td>显示月份的列表。</td> 
   <td>['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</td> 
  </tr> 
  <tr> 
   <td>year</td> 
   <td>number</td> 
   <td>日历的年。下面的实例演示如何使用指定的年和月来创建一个日历。 <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;div class="easyui-calendar" data-options="year:2012,month:6" /&gt;</li> 
    </ol></td> 
   <td>当前年份（4 位）</td> 
  </tr> 
  <tr> 
   <td>month</td> 
   <td>number</td> 
   <td>日历的月。</td> 
   <td>当前月份（从 1 开始）</td> 
  </tr> 
  <tr> 
   <td>current</td> 
   <td>Date</td> 
   <td>当前的日期。</td> 
   <td>当前日期</td> 
  </tr> 
 </tbody> 
</table>

### 事件 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onSelect</td> 
   <td>date</td> 
   <td>当用户选择一个日期时触发。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#cc').calendar({ </li> 
     <li>onSelect: function(date){ </li> 
     <li>alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回选项（options）对象。</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>none</td> 
   <td>调整日历的尺寸。</td> 
  </tr> 
  <tr> 
   <td>moveTo</td> 
   <td>date</td> 
   <td>移动日历到一个指定的日期。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#cc').calendar('moveTo', new Date(2012, 6, 1));</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>
    <div id="cc1"></div>
    <script type="text/javascript">
        $('#cc1').calendar({
            onSelect: function(date){
                alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
            }
        });
    </script>
    </body>
    </html>

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190621201804379.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70