Calendar 日历

使用指南

日历展示选择组件

代码演示

查看代码

<template>
  <div>
    <h3-calendar :markDate="markDate" />
  </div>
</template>

<script>
import H3Calendar from '@/components/h3-calendar/';

export default {
  name: 'CalendarDemo',
  components: {
    H3Calendar,
  },
  data () {
    return {
      markDate: ['2019-12-01', '2019-12-11', '2019-12-16', '2019-12-23', '2019-12-28'],
    };
  },
  mounted () {
    const date = new Date();
    this.markDate = Array(5)
      .fill(0)
      .map(() => `${date.getFullYear()}-${date.getMonth() + 1}-${Math.floor(Math.random() * 27 + 1)}`);
  },
};
</script>

与h3-mobile-vue组件的区别以及迁移

对calendar组件进行了样式及性能优化。

若要做迁移请参考

1. 弃用的props：choseDay changeMonth markDateMore
2. 替换的props：
   • agoDayHide => startDate
   • futureDayHide => endDate
3. 新增的props：

API

Prop

属性	说明	类型	默认值
markDate	日期标记，数组项为YYYY-MM-DD的日期	array	[]
collapse	日历是否折抵起来，默认折抵	boolean	true
startDate	选择范围的开始时间，可以是Date对象或者能转成Date的字符串	date, string	new Date(1980, 0, 1, 0, 0, 0)
endDate	选择范围的结束时间，可以是Date对象或者能转成Date的字符串	date, string	new Date(2080, 11, 31, 23, 59, 59)

Event

事件名	说明	参数
update:collapse	收起展开触发事件	(collapse: boolean)
changeDay	选择日期变化触发事件	(format: string, date: Date)
changeMonth	选择月份变化触发事件	(format: string, date: Date)