React EasyUI 日历

2020-06-24 12:08 更新

日历(Calendar)显示允许用户选择日期的一个月份日历,并允许移动到上一月和下一页。 日历(Calendar)在默认情况下,每星期的第一天设置为星期日。这可以通过设置 'firstDay' 属性的值来改变。

属性列表

名称 数据类型 作用描述 默认值
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 是否显示周数。 false
selection Date 选择日期。 null
weekNumberHeader string 显示在周号标头上的标签。
validator function(date) 验证日期的函数。 return true

  • 以指定的年和月创建日历的代码实例:

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

事件列表

名称 参数 作用描述
onSelectionChange date 更改选择时触发。

方法列表

名称 参数 返回值 作用描述
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

公众号
微信公众号

编程狮公众号