inlineCalendar 日历组件

优质

小牛编辑

133浏览

2023-12-01

import { Inlinecalendar } from 'feui';
components: {
  [Inlinecalendar.name]: Inlinecalendar
}
data () {
  return {
    show: true,
    value: ['2018-11-10','2018-11-11','2018-11-12'],
    listValue: '',
    range: false,
    showLastMonth: true,
    showNextMonth: true,
    highlightWeekend: false,
    return6Rows: true,
    hideHeader: false,
    hideWeekList: false,
    replaceTextList: {},
    replace: false,
    changeWeeksList: false,
    weeksList: [],
    useCustomFn: false,
    buildSlotFn: () => '',
    disablePast: false,
    disableFuture: false,
    disableWeekend: false,
    disableDateFunction (date) {
      if (date.formatedDate === '2017-10-16') {
        return true
      }
    }
  }
},

代码演示

<fe-inlinecalendar
  ref="calendar"
  @on-change="onChange"
  @on-view-change="onViewChange"
  class="inline-calendar-demo"
  :show.sync="show"
  v-model="value"
  start-date="2016-04-21"
  end-date="2018-11-11"
  :range="range"
  :show-last-month="showLastMonth"
  :show-next-month="showNextMonth"
  :highlight-weekend="highlightWeekend"
  :return-six-rows="return6Rows"
  :hide-header="hideHeader"
  :hide-week-list="hideWeekList"
  :replace-text-list="replaceTextList"
  :weeks-list="weeksList"
  :render-function="buildSlotFn"
  :disable-past="disablePast"
  :disable-future="disableFuture"
  :disable-weekend="disableWeekend"
  :disable-date-function="disableDateFunction">
</fe-inlinecalendar>

API

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

Slots

Slot名	说明	备注
each-day	用以自定义每一天的显示渲染，推荐使用该 slot 来替代 render-function	-
-	-	-

Events

事件名	参数	说明	备注
on-change	-	值变化时触发	-
on-select-single-date	`currentValue`	单选模式下选中日期时触发	-
-	-	-	-

Methods

方法名	参数	说明	备注
getDates	-	获取当前日期列表	-
switchViewToToday	-	渲染当天所在月份	-
switchViewToMonth	`year, month`	渲染特定年月日期	-
switchViewToCurrentValue	-	渲染当前值所在月份	-
-	-	-	-