React EasyUI 日歷

2020-06-24 12:08 更新

日歷(Calendar)顯示允許用戶選擇日期的一個月份日歷,并允許移動到上一月和下一頁。 日歷(Calendar)在默認情況下,每星期的第一天設置為星期日。這可以通過設置 '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 日歷的年。 當前年份(4 位)
month number 日歷的月。 當前月份(從 1 開始)
showWeek boolean 是否顯示周數(shù)。 false
selection Date 選擇日期。 null
weekNumberHeader string 顯示在周號標頭上的標簽。
validator function(date) 驗證日期的函數(shù)。 return true

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

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

事件列表

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

方法列表

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

注:
- 繼承: LocaleBase 。

使用方法

<Calendar
  style={{ width: 250, height: 250 }}
  selection={this.state.value}
  onSelectionChange={this.handleSelectionChange.bind(this)}
/>
以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號