EasyUI中Calendar日历的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中Calendar日历的简单使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
效果
屬性
| width | number | 日歷（calendar）組件的寬度。 | 180 |
| height | number | 日歷（calendar）組件的高度。 | 180 |
| fit | boolean | 當設置為 true 時，則設置日歷的尺寸以適應它的父容器。 | false |
| border | boolean | 定義是否顯示邊框。 | true |
| firstDay | number | 定義每星期的第一天。星期日（Sunday）是 0，星期一（Monday）是 1，... | 0 |
| weeks | array | 顯示星期的列表。 | ['S','M','T','W','T','F','S'] |
| months | array | 顯示月份的列表。 | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
| year | number | 日歷的年。下面的實例演示如何使用指定的年和月來創建一個日歷。 | 當前年份（4 位） |
| month | number | 日歷的月。 | 當前月份（從 1 開始） |
| current | Date | 當前的日期。 | 當前日期 |
事件
| onSelect | date | 當用戶選擇一個日期時觸發。 代碼實例： |
方法
| options | none | 返回選項（options）對象。 |
| resize | none | 調整日歷的尺寸。 |
| moveTo | date | 移動日歷到一個指定的日期。 代碼實例： |
?
實現
<!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>?
總結
以上是生活随笔為你收集整理的EasyUI中Calendar日历的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI中filebox文件选择框的
- 下一篇： EasyUI中Datebox日期框的简单