HIPS-UNI-UI

# Calendar 日历

# 使用指南

import Calendar from '@hips/uni-ui/lib/calendar';

export default {
  components: {
    'hips-calendar': Calendar,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-calendar />
1

# 设定周次标签

<hips-calendar
  :week-label="['Mon', 'Tues', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
/>
1
2
3

# 包含上下月

<hips-calendar full-line />
1

# 自定义每周起始周次

<hips-calendar week-start="1" />
1

# 添加附加配置

<hips-calendar :append="appendFuc" />
1
export default {
  methods: {
    appendFuc(day) {
      const today = formatDateTime(new Date(), 'yyyy-MM-dd');
      if (day === today) {
        return {
          topLabel: '哈哈',
          dateLabel: '今',
          desc: '这是今天',
          appendInfo: '今天是个好日子',
          border: '1px solid red',
          borderRadius: '100%',
        };
      }
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 单选

<hips-calendar selectable select-type="single" @select="handleSelect" />
1
export default {
  methods: {
    handleSelect(days) {
      console.log('days = ', days); // ['2020-04-01']
    },
  },
};
1
2
3
4
5
6
7

# 多选

<hips-calendar selectable select-type="multi" @select="handleSelect" />
1
export default {
  methods: {
    handleSelect(days) {
      console.log('days = ', days); // ['2020-04-01','2020-04-10','2020-03-02']
    },
  },
};
1
2
3
4
5
6
7

# 选择区间

<hips-calendar selectable select-type="start-end" @select="handleSelect" />
1
export default {
  methods: {
    handleSelect(days) {
      console.log('days = ', days); // ['2020-04-01','2020-04-10']
    },
  },
};
1
2
3
4
5
6
7

注意

  1. 每个日期单元是一个日期对象，包含如下属性

    属性 描述 只读
    _date 原始时间 true
    _inCurrentMonth 是否在当前月 true
    _dateFormat 格式化(yyyy-MM-dd)后时间 true
    topLabel 顶部描述 false
    desc 中间描述 false
    appendInfo 底部描述 false
    dateLabel 显示的日期 false
    border 边框属性 false
    borderRadius 边框半径 false
    bgColor 背景颜色 false
    color dateLabel 对应的文字颜色 false
    topColor topLabel 对应的文字颜色 false
    descColor desc 对应的文字颜色 false
    appendInfoColor appendInfo 对应的文字颜色 false

  2. 可以通过 append 属性修改日期对象中的非只读属性

  3. 选择完成后的逻辑

    • 单选: 返回 length=1 的数组，第一个值为选中的日期，已格式化 (yyyy-MM-dd)

    • 多选: 返回 length=n 的数组，每一个值都是选中的日期，按照点击顺序排列，已格式化 (yyyy-MM-dd)

    • 选择区间: 返回 lenght=2 的数组，第一个值为起始时间，第二个值为结束时间，按照时间从小到大排列，已格式化 (yyyy-MM-dd)

# Calendar API

参数 说明 类型 可选值 默认值
tool-position 顶部工具位置 String ['left','center','right'] center
select-month 当前选择的月份 String - 当前月(yyyy-MM)
week-label 周次标签 Array - ['一','二','三','四','五','六','日']
week-start 每周起始周次 [String,Number] 1-7 7
full-line 单行是否填充上下月 Boolean - false
append 设置额外属性 Function - -
selectable 是否可以选择 Boolean - false
select-type 选择类型 String ['single','multi','start-end'] single
selected-color 选中后的文字颜色 String - white
selected-bg-color 选中后的背景颜色 String - #1F8CEB

# Calendar Event

事件名 说明 参数
click-day 在非选择模式下点击日期触发 -
select 在选择模式下点击日期触发 选择的日期数组
click-title 点击工具标题触发 -

# Calendar Slot

名称 说明
title 自定义工具内容
footer 自定义底部内容

# 样式变量

变量名 说明 默认值
calendar-header-box-shadow 头部阴影 0 2px 10px rgba(125, 126, 128, 0.16)
calendar-header-tool-height 头部工具栏高度 100rpx
calendar-header-tool-font-size 头部工具栏文字大小 32rpx
calendar-header-tool-bg-color 头部工具栏背景颜色 white
calendar-header-tool-title-color 头部工具栏标题颜色 #4A4A4A
calendar-header-label-height 头部周次标签高度 64rpx
calendar-header-label-font-size 头部周次标签文字大小 28rpx
calendar-header-label-bg-color 头部周次标签背景颜色 white
calendar-header-label-color 头部周次标签文字颜色 #666666
calendar-day-top-label-font-size 日期单元格上方标签文字大小 20rpx
calendar-day-top-label-height 日期单元格上方标签高度 30rpx
calendar-day-date-label-font-size 日期单元格日期标签文字大小 28rpx
calendar-day-date-label-height 日期单元格日期标签高度 60rpx
calendar-day-date-label-width 日期单元格日期标签宽度 60rpx
calendar-day-desc-font-size 日期单元格描述内容文字大小 20rpx
calendar-day-desc-height 日期单元格描述内容高度 28rpx
calendar-day-append-info-font-size 日期单元格附加信息文字大小 20rpx
calendar-day-append-info-height 日期单元格附加信息高度 28rpx

注意

更新日志