Inline Calendar

Props

参数 类型 默认值 说明
value String 当前选中日期,默认为空,即选中当天日期
v-model String value的双向绑定
start-date String 可选起始日期,格式为'YYYY-MM-dd'
end-date String 可选结束日期,格式为'YYYY-MM-dd'
render-month Array 可选,指定渲染日期,如 [2018, 8]
show-last-month Boolean true 是否显示上个月的日期
show-next-month Boolean true 是否显示下个月的日期
highlight-weekend Boolean false 是否高亮周末
return-six-rows Boolean true 是否总是渲染6行日期
hideHeader Boolean false 是否隐藏日历头部
hiddeWeekList Boolean false 是否隐藏星期列表
replace-text-list Object {} 替换列表,可以将默认的日期换成文字,比如今天的日期替换成,{'TODAY':'今'}
weeks-list Array ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] 导航星期列表,从周日开始
custom-slot-fn Function 用于为特定日期添加额外的html内容,参数为(行index,列index,日期详细属性)
render-on-value-chhange Boolean true 当日期变化时是否重新渲染日历,如果是渲染了多个日历的话需要设为false
disable-past Boolean false 禁止选择过去的日期,该选项可以与start-date同时使用

demos

PC文档样式会有偏差,后面修复。

设置开始和结束时间


<template>
<inline-calendar start-date="2016-06-04" end-date="2017-06-18"></inline-calendar>
</template>

不显示上个月和下个月的日期


<template>
<inline-calendar :show-next-month="false" :show-last-month="false"></inline-calendar>
</template>

取值


<template>
<inline-calendar v-model="value"></inline-calendar>
<group>
  <cell title="current value" v-model="value"></cell>
</group>
</template>

<script>
export default {
  data () {
    return {
      value: 'TODAY'
    }
  }
}
</script>

results matching ""

    No results matching ""