• InlineCalendar
    • 安装
    • 属性
    • 事件
    • 插槽
    • 方法
    • 相关 issue
    • 贡献者
    • 发布日志

    InlineCalendar

    InlineCalendar

    demo 原始链接demo 源码编辑文档组件源码

    inline-calendar - 图1

    二维码

    inline-calendar - 图2

    Install

    安装

    局部注册

    全局注册

    1. import { InlineCalendar } from 'vux'
    2. export default {
    3. components: {
    4. InlineCalendar
    5. }
    6. }

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

    API

    属性

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

    事件

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

    插槽

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

    方法

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

    Issues

    相关 issue

    • #2701 [Feature Request] InlineCalendar日历“过去的日期”和”未来的日期”的规律是什么?存放这个数据的数组在哪?

    贡献者

    贡献者

    该组件(包含文档)迭代次数 65,贡献人数 6
    airylandQiongrong Jianglongyuan万刚greedyinglichunqiang

    Changelog

    发布日志

    • 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 变化不重新渲染的问题