calendar

Calendar

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

calendar - 图1

二维码

calendar - 图2

Install

安装

局部注册

全局注册

import { Calendar } from 'vux'
export default {
  components: {
    Calendar
  }
}

// 在入口文件全局引入
import Vue from 'vue'
import { Calendar } from 'vux'
Vue.component('calendar', Calendar)

  <group>
    <calendar title="title" v-model="value"></calendar>
  </group>

calendar只能在Group中使用除了title和 value, 其他props和inline-calendar完全一致。

当绑定值为数组时，日历将为多选模式

API

名字	类型	默认值	说明	版本要求
value	string		表单值, v-model 绑定。当值为空时，为单选；当值为[]时，为多选；设置值为'TODAY'可快捷选取当前日期。`placeholder`只有在值为空或[]时显示。	—
title	string		label文字	—
placeholder	string		占位提示文字	—
show-popup-header	boolean		是否显示弹窗头部，当为多选时强制显示，单选时默认不显示	v2.6.0
popup-header-title	string		弹窗头部文字	v2.6.0
display-format	function		格式化显示值	v2.6.4
readonly	string		是否禁用弹窗选择	v2.7.2

Variables

## 样式变量

名字	默认值	说明	继承自变量
@calendar-arrow-color	#04BE02	前进后退的箭头颜色	@theme-color
@calendar-highlight-color	#E59313	周末高亮的文本颜色
@calendar-selected-bg-color	#04BE02	选中时的背景颜色	@theme-color
@calendar-disabled-font-color	#c0c0c0	禁用时的文本颜色
@calendar-today-font-color	#04BE02	今天的文本颜色	@theme-color
@calendar-date-item-font-size	16px	单元格的字号
@calendar-bg-color	#fff	背景颜色
@calendar-each-date-item-size	26px	日期单元格尺寸大小
@calendar-each-date-item-line-height	25px	日期单元格的行高
@calendar-header-day-item-color	#000	头部的文本颜色

Issues