048_Calendar日历

1. Calendar日历

1.1. Calendar日历显示日期。

1.2. Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	Date/string/number	无	无
range	时间范围, 包括开始时间与结束时间。开始时间必须是周一, 结束时间必须是周日, 且时间跨度不能超过两个月。	Array	无	无
first-day-of-week	周起始日	Number	1 到 7	1

1.2. dateCell scoped slot参数

参数	说明	类型	可选值	默认值
date	单元格代表的日期	Date	无	无
data	{ type, isSelected, day}, type表示该日期的所属月份, 可选值有prev-month, current-month, next-month; isSelected标明该日期是否被选中; day是格式化的日期, 格式为yyyy-MM-dd	Object	无	无

2. Calendar日历例子

2.1. 使用脚手架新建一个名为element-ui-calendar折叠面板的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue' import VueRouter from 'vue-router' import Calendar from '../components/Calendar.vue' import MyselfCalendar from '../components/MyselfCalendar.vue' import RangeCalendar from '../components/RangeCalendar.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Calendar' },{ path: '/Calendar', component: Calendar },{ path: '/MyselfCalendar', component: MyselfCalendar },{ path: '/RangeCalendar', component: RangeCalendar } ]const router = new VueRouter({routes })export default router

2.3. 在components下创建Calendar.vue

<template><div><h1>基本</h1><h4>设置value来指定当前显示的月份。如果value未指定, 则显示当月。value支持v-model双向绑定。</h4><el-calendar v-model="value"></el-calendar></div> </template><script> export default {data () {return {value: new Date()}} } </script>

2.4. 在components下创建MyselfCalendar.vue

<template><div><h1>自定义内容</h1><h4>通过设置名为dateCell的scoped-slot来自定义日历单元格中显示的内容。在scoped-slot可以获取到date(当前单元格的日期), data(包括type, isSelected, day属性)。</h4><el-calendar><!-- 这里使用的是2.5 slot语法, 对于新项目请使用2.6 slot语法--><template slot="dateCell" slot-scope="{date, data}"><p :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}</p></template></el-calendar></div> </template><style scoped>.is-selected {color: #1989FA;} </style>

2.5. 在components下创建RangeCalendar.vue

<template><div><h1>自定义范围</h1><h4>设置range属性指定日历的显示范围。开始时间必须是周起始日, 结束时间必须是周结束日, 且时间跨度不能超过两个月。</h4><el-calendar :range="['2019-03-04', '2019-03-24']"></el-calendar></div> </template>

2.6. 运行项目, 访问http://localhost:8080/#/Calendar

2.7. 运行项目, 访问http://localhost:8080/#/MyselfCalendar

2.8. 运行项目, 访问http://localhost:8080/#/RangeCalendar

总结

以上是生活随笔为你收集整理的048_Calendar日历的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。