Vue EasyUI 日历
2020-06-24 11:46 更新
日历（ 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 | 显示在周号标头上的标签。 |
- 以指定的年和月创建日历的代码实例：
<div class="easyui-calendar" data-options="year:2012,month:6" />事件列表
| 名称 | 参数 | 作用描述 |
|---|---|---|
| selectionChange | date | 更改选择时触发。 |
方法列表
| 名称 | 参数 | 返回值 | 作用描述 |
|---|---|---|---|
| selectDate | date | void | 选择一个日期。 |
| highlightDate | date | void | 标出一个日期。 |
| navDate | step | void | 浏览日期。 |
作用域
| 名称 | 参数 | 作用描述 |
|---|---|---|
| default | data | 日期范围的域。 |
注：
- 继承： None 。
使用方法
<Calendar :selection="value" @selectionChange="value=$event" style="width:250px;height:250px"></Calendar>
<p>{{value | formatDate}}</p>以上内容是否对您有帮助：
更多建议：