Vue EasyUI 日歷

2020-06-24 11:46 更新

日歷( Calendar )顯示允許用戶選擇日期的一個月份日歷,并允許移動到上一月和下一頁。 日歷( Calendar )在默認情況下,每星期的第一天設(shè)置為星期日。這可以通過設(shè)置 'firstDay' 屬性的值來改變。

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認值
border boolean 是否顯示邊框。 true
firstDay number 定義每星期的第一天。星期日(Sunday)是 0,星期一(Monday)是 1,... 0
weeks string[ ] 顯示星期的列表。 ['S','M','T','W','T','F','S']
months string[] 顯示月份的列表。 ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
year number 日歷的年。 當(dāng)前年份(4 位)
month number 日歷的月。 當(dāng)前月份(從 1 開始)
showWeek boolean 是否顯示周數(shù)。 false
selection Date 選擇日期。 null
weekNumberHeader string 顯示在周號標(biāo)頭上的標(biāo)簽。

  • 以指定的年和月創(chuàng)建日歷的代碼實例:

<div class="easyui-calendar" data-options="year:2012,month:6" />

事件列表

名稱 參數(shù) 作用描述
selectionChange date 更改選擇時觸發(fā)。

方法列表

名稱 參數(shù) 返回值 作用描述
selectDate date void 選擇一個日期。
highlightDate date void 標(biāo)出一個日期。
navDate step void 瀏覽日期。

作用域

名稱 參數(shù) 作用描述
default data 日期范圍的域。

注:
- 繼承: None 。

使用方法

<Calendar :selection="value" @selectionChange="value=$event" style="width:250px;height:250px"></Calendar>
<p>{{value | formatDate}}</p>
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號