表单 - inline-calendar - 《VUX 2.x 组件文档》

安装

局部注册

全局注册

import { InlineCalendar } from 'vux'
export default {
  components: {
    InlineCalendar
  }
}

// 在入口文件全局引入
import Vue from 'vue'
import { InlineCalendar } from 'vux'
Vue.component('inline-calendar', InlineCalendar)

API

属性

名字	类型	默认值	说明	版本要求
value	string array		当前选中日期，使用`v-model`绑定。值为字符串(包括空字符串)时表示单选日期，为数组(包括空数组)时表示多选。	—
render-month	array		指定渲染日期，如 [2018, 8]	—
start-date	string		起始日期，格式为 `YYYY-MM-dd`	—
end-date	string		结束日期，格式为`YYYY-MM-dd`	—
show-last-month	boolean	true	是否显示上个月的日期	—
show-next-month	boolean	true	是否显示下个月的日期	—
highlight-weekend	boolean	false	是否高亮周末	—
return-six-rows	boolean	true	是否总是渲染6行日期	—
hide-header	boolean	false	是否隐藏日历头部	—
hide-week-list	boolean	false	是否隐藏星期列表	—
replace-text-list	object		替换列表，可以将默认的日期换成文字，比如今天的日期替换成今，{'TODAY':'今'}	—
weeks-list	array	['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']	星期列表，从周日开始	—
render-function	function		用于为特定日期添加额外的html内容，参数为(行index,列index,日期详细属性)	—
render-on-value-change	boolean	true	当日期变化时是否重新渲染日历，如果是渲染了多个日历的话需要设为false	—
disable-past	boolean	false	禁止选择过去的日期，该选项可以与 start-date 同时使用	—
disable-future	boolean	false	禁止选择未来的日期，该选项可以 end-date 同时使用	—
marks	array		(beta) 自定义日期标记	v2.6.0
disable-weekend	boolean	false	是否禁用周六日	v2.7.0
disable-date-function	function		自定义标记特定日期是否应该禁用，返回 true 表示禁用，false 表示不禁用，不返回表示和原有逻辑一致(这样不影响和 disable-weekend 等禁用属性同时使用)	v2.7.0

事件

名字	参数	说明	版本要求
@on-change	—	值变化时触发	—
@on-view-change	(data, index)	渲染月份变化时触发。初始化时会触发一次，如果不希望处理初始化时的触发，可以检查第二个参数是否为 0	v2.5.12
@on-select-single-date	(currentValue)	单选模式下选中日期时触发	2.7.6

插槽

名字	说明	版本要求
each-day	用以自定义每一天的显示渲染，推荐使用该 slot 来替代 render-function	v2.3.5

方法

名字	参数	说明	版本要求
getDates		获取当前日期列表	v2.5.11
switchViewToToday		渲染当天所在月份	v2.5.12
switchViewToMonth	(year, month)	渲染特定年月日期	v2.5.12
switchViewToCurrentValue		渲染当前值所在月份	v2.5.12

Issues

发布日志

v2.7.6 [feature] 添加事件 on-select-single-date
v2.7.3 [fix] 修复 disable-date-function 取值与禁用周末逻辑冲突 #2189
v2.7.2 [fix] 修复多选情况下重置值时没有正确渲染的问题 #2160
v2.7.2 [fix] 修复部分属性没有继承 inline-calendar 的问题 #2105
v2.7.2 [fix] 修复禁用周末日期仍能点击的问题 #2178
v2.7.0 [enhance] 在 created hook 执行渲染而不是 mounted(ssr)
v2.7.0 [feature] 添加属性 prop:disable-weekend 来禁用周末 #2105
v2.7.0 [feature] 添加属性 prop:disable-date-function 自定义标记禁用日期 #2105
v2.7.0 [fix] 移除重复的多次重复渲染 #2066
v2.6.0 [feature] (beta) 支持属性 marks 用以自定义特定日期显示样式
v2.6.0 [fix] 修复星期文字 i18n
v2.5.12 [feature] 支持 switchViewToToday, switchViewToMonth 等手动渲染方法
v2.5.12 [feature] 支持事件 on-view-change，方便切换月份时请求数据
v2.5.11 [feature] 支持方法 getDates 用于需要获取渲染日期列表的场合
v2.5.11 [feature] 支持 less 变量 @calendar-bg-color
v2.5.9 [fix] 点击当前日期项时不把值置为空 #1862
v2.5.8 [fix] 修复 on-change 事件触发两次问题 #1847
v2.5.5 [feature] 支持多选 #1446 #1467
v2.4.0 [enhance] 当 render-month 变化时重新渲染日历
v2.3.8 [enhance] 不可见日期不可点击 #1564
v2.3.6 [change] render-function 参数 day => date（在 3.0 版本前不会影响目前使用）#1361
v2.3.5 [feature] 支持自定义每一天的 html 渲染 slot:each-day
v2.3.1 [fix] 修复 render-function 生成的内容错误显示问题 #1409
v2.2.2 [enhance] 当日期的替代文字为空字符串时，包含日期的 span 元素将不显示
v2.2.1-rc.2 [enhance] 可以点击下个月日期并自动切换到下个月 #1192
v2.2.1-rc.2 [fix] 修复 start-date 和 end-date 变化后不重新渲染的问题 #1219
v2.1.1-rc.10 [feature] 支持多个 less 变量. #896
v2.1.1-rc.5 [fix] 修复 render-function 变化不重新渲染的问题

inline-calendar

InlineCalendar

安装

属性

事件

插槽

方法

相关 issue

贡献者

发布日志