calendar(日历) · easyUI

### Calendar（日历）使用$.fn.calendar.defaults重写默认值对象。日历控件显示一个月的日历，允许用户选择日期和移动到下一个或上一个月。默认情况下，一周的第一天是周日。它可以通过设置'firstDay'属性的值来更改设置。 ![](https://box.kancloud.cn/2016-07-19_578d91398823c.png) #### 使用案例使用标签创建日历。 1. **<div** id="cc" class="easyui-calendar" style="width:180px;height:180px;"**></div>** <div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div> 使用Javascript创建日历。 1. **<div** id="cc" style="width:180px;height:180px;"**></div>** <div id="cc" style="width:180px;height:180px;"></div> 1. $('#cc').calendar({ 1. current:new Date() 1. }); $('#cc').calendar({ current:new Date() }); #### 属性 <table class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>width</td> <td>number</td> <td>日历控件宽度。</td> <td>180</td></tr><tr><td>height</td> <td>number</td> <td>日历控件高度。</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>定义一周的第一天是星期几。0=星期日、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', <br/>'Sep', 'Oct', 'Nov', 'Dec']</td></tr><tr><td>year</td> <td>number</td> <td>年日历。下面的例子显示了如何使用指定的年份和月份创建一个日历。<pre><div class="easyui-calendar" data-options="year:2012,month:6" /> </pre></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><tr><td>formatter</td> <td>function(date)</td> <td> <p>日期格式化函数，返回日期值。<strong><font color="#ff0000">（该属性自1.3.6版开始可用）</font></strong></p> <p>代码示例：</p><pre>$('#cc').calendar({ formatter: function(date){ return date.getDate(); } })</pre></td> <td/></tr><tr><td>styler</td> <td>function(date)</td> <td>日历天的样式函数，返回行内样式或CSS样式表的Class名称。<strong><font color="#ff0000">（该属性自1.3.6版开始可用）</font></strong> <p>代码示例：</p><pre>$('#cc').calendar({ styler: function(date){ if (date.getDay() == 1){ return 'background-color:#ccc'; // 函数可以返回预定义的css class和预定义的行内样式 // return {class:'r1', style:{'color:#fff'}};  } else { return ''; } } })</pre></td> <td/></tr><tr><td>validator</td> <td>function(date)</td> <td>验证器函数用于确定是否可以选择日历上的某一天，返回false将阻止选择当前天。<strong><font color="#ff0000">（该属性自1.3.6版开始可用）</font></strong> <p>代码示例：</p><pre>$('#cc').calendar({ validator: function(date){ if (date.getDay() == 1) { return true; } else { return false; } } })</pre></td> <td/></tr></tbody></table> #### 事件 <table class="doc-table"><tbody><tr><th><strong>事件名</strong></th> <th><strong>事件参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>onSelect</td> <td>date</td> <td>在用户选择一天的时候触发。 <p>代码示例：</p><pre>$('#cc').calendar({ onSelect: function(date){ alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate()); } }); </pre></td></tr><tr><td>onChange</td> <td>new Date, oldDate</td> <td>在用户更改日期的时候触发。<strong><font color="#ff0000">（该事件自1.3.6版开始可用）</font></strong> </td></tr></tbody></table> #### 方法 <table class="doc-table"><tbody><tr><th><strong>方法名称</strong></th> <th><strong>方法参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回参数对象。</td></tr><tr><td>resize</td> <td>none</td> <td>调整日历大小。</td></tr><tr><td>moveTo</td> <td>date</td> <td>移动日历到指定日期。 <p>代码示例：</p><pre>$('#cc').calendar('moveTo', new Date(2012, 6, 1)); </pre></td></tr></tbody></table>