lx544690189 / Vue Mobile Calendar
Licence: mit
a vue component of calendar for mobile移动端vue日期选择组件
Stars: ✭ 194
Projects that are alternatives of or similar to Vue Mobile Calendar
Vue Beauty
Beautiful UI components build with vue and ant design
Stars: ✭ 2,109 (+987.11%)
Mutual labels: vue-components
Vue Eva Icons
Is a pack of more than 480 beautiful open source Eva icons as Vue components
Stars: ✭ 189 (-2.58%)
Mutual labels: vue-components
React Datepicker2
react datepicker component.(include persian jalaali calendar)
Stars: ✭ 191 (-1.55%)
Mutual labels: calendar
Android Week Calendar
android可自定义日历方案,支持农历、自定义日历控件、排班、左右滑动、周月切换、跳转到指定日期等功能
Stars: ✭ 186 (-4.12%)
Mutual labels: calendar
Vue Switches
An on/off switch component for Vue.js with theme support.
Stars: ✭ 188 (-3.09%)
Mutual labels: vue-components
Vue Sticker
Vue component, that helps to make sticky effects
Stars: ✭ 189 (-2.58%)
Mutual labels: vue-components
Viewui
A high quality UI Toolkit built on Vue.js 2.0
Stars: ✭ 2,487 (+1181.96%)
Mutual labels: vue-components
Vue Bootstrap4 Table
Advanced table based on Vue 2 and Bootstrap 4 ⚡️
Stars: ✭ 187 (-3.61%)
Mutual labels: vue-components
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (-3.09%)
Mutual labels: vue-components
Angular Calendar
A calendar component for Angular 12.0+ that can display events on a month, week or day view. The successor of angular-bootstrap-calendar.
Stars: ✭ 2,312 (+1091.75%)
Mutual labels: calendar
Add Event To Calendar Docs
📅 Docs how to generate links to add events to online calendar services
Stars: ✭ 193 (-0.52%)
Mutual labels: calendar
Date
A date and time library based on the C++11/14/17 <chrono> header
Stars: ✭ 2,389 (+1131.44%)
Mutual labels: calendar
Eventscalendar
Events Calendar is a user-friendly library that helps you achieve a cool Calendar UI with events mapping. You can customise every pixel of the calendar as per your wish and still achieve in implementing all the functionalities of the native android calendar in addition with adding dots to the calendar which represents the presence of an event on the respective dates. It can be done easily, you are just a few steps away from implementing your own badass looking Calendar for your very own project!
Stars: ✭ 188 (-3.09%)
Mutual labels: calendar
Icalendar Generator
Generate calendars in the iCalendar format
Stars: ✭ 193 (-0.52%)
Mutual labels: calendar
Recal
A minimal, accessible React/Preact calendar component using modern CSS.
Stars: ✭ 191 (-1.55%)
Mutual labels: calendar
vue-mobile-calendar
a vue component of calendar for mobile
移动端日期选择器(>=vue2.0)
点击查看DEMO,或手机扫描下方二维码
使用方法
npm安装
npm install vue-mobile-calendar
import Calendar from 'vue-mobile-calendar'
Vue.use(Calendar);
disk/Calendar.umd.min.js
外部引用方式,引入目录文件<script src='/dist/Calendar.umd.min.js'></script>
注意
本次版本升级api与2.x版本不相同,2.x版本api请点击查看
更新日志
- V3.2.1(2019-8-17)
- V3.2.0(2019-7-14)
- 新增
yearName
设置“年”的多语言; - 新增
changeDate
方法,用于改变已选日期; - 修复弹窗calendar未暴露组件的某些方法导致调用报错;
- 修复移动端滚动穿透问题;
- 新增
- V3.1.1(2019-6-2) 新增minDate、maxDate设置最大、最小可选日期;新增changeDateView方法,用于重置置当前显示的日期
- V3.0.6(2019-3-26) 增加年月切换事件switch
- V3.0.0(2019-3-16) 增加多选、时间段选择模式;增加日期内联显示方式;部分api与2.x不相同,升级请注意
Quickstart
<template>
<div id="demo">
<calendar @change="onChange"/>
<inlineCalendar />
</div>
</template>
<script>
// Vue.use(Calendar)后可直接使用`<calendar />`和`<inlineCalendar />`组件。calendar为底部弹窗显示,inlineCalendar为页面内联显示(可放置页面任意地方)
export default {
methods: {
onChange(date) {
console.log(date.format('YY-MM-DD'));
},
},
};
// 或者在.vue文件中单独引入注册
// import {calendar,inlineCalendar} from 'vue-mobile-calendar';
// export default {
// components: {
// calendar,
// },
// };
</script>
关于日期类型
组件中日期处理依赖dayjs(api和moment相同,大小仅2kb),如在设置defaultDate
时,所支持类型如下:
当前时间
直接运行
dayjs()
,得到包含当前时间和日期的Dayjs
对象。dayjs()时间字符串
可以解析传入的一个标准的ISO 8601时间字符串。
dayjs(String) dayjs('1995-12-25')Date 对象
可以解析传入的一个 Javascript Date 对象。
dayjs(Date) dayjs(new Date(2018, 8, 18))Unix 时间戳 (毫秒)
可以解析传入的一个 Unix 时间戳 (13 位数字)。
dayjs(Number) dayjs(1318781876406)Unix 时间戳 (秒)
可以解析传入的一个 Unix 时间戳 (10 位数字)。
dayjs.unix(Number) dayjs.unix(1318781876)
更多api查看dayjs
属性
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
mode |
String |
'single' | 时间选择模式,single :单选模式;multiple :多选模式;during :时间段选择模式 |
defaultDate |
[Date, Number, Array, String] |
- | 默认已选时间,mode 为单选模式时为Dayjs 所支持的时间类型(见上面说明),如'1995-12-25';mode 为多选模式为数组形式;mode 为时间段选择模式为长度2的数组,如[startDate,endDate]
|
disabledDate |
Array |
[] | 不可选日期,仅mode 为'single'和'multiple'下支持 |
enableTouch |
Boolean |
true |
允许手势滑动切换月份 |
yearName |
String |
'年' |
“年”的文本 |
monthNames |
Array |
['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] |
显示的月份文本 |
weekNames |
Array |
['周一', '周二', '周三', '周四', '周五', '周六', '周日'] |
显示的星期文本 |
show |
Boolean |
false |
显示/关闭时间选择器弹窗(仅弹窗显示形式的calendar生效),可以使用sync修饰符:show.sync="isShow" 来对此属性进行双向绑定,方便控制组件的显示隐藏 |
closeByClickMask |
Boolean |
true |
允许点击遮罩层关闭(仅弹窗显示形式的calendar生效) |
dayClick |
Function |
- | 日期点击时的回调函数,回调参数为当前所点击的日期,return false 将不会执行选中、取消选中的操作 |
switch |
Function |
- | 年月切换的回调,回调参数为当前显示的年月{year,month}
|
minDate |
[Date, Number, Array, String] |
- | (v-3.1.0新增)指定最小可选时间,为Dayjs 所支持的类型数据,不能与disabledDate 同时使用 |
maxDate |
[Date, Number, Array, String] |
- | (v-3.1.0新增)指定最大可选时间,为Dayjs 所支持的类型数据,不能与disabledDate 同时使用 |
事件
名称 | 说明 | 回调 |
---|---|---|
change | 当前所选日期改变 | 回调参数为当前所选日期(dayjs类型,如获取时间字符串:date.format('YYYY-MM-DD') ),mode 为单选模式时为date ;mode 为多选模式为[date1,date2] ;mode 为时间段选择模式为[startDate,endDate] ,当只选了开始时间时会为[startDate]
|
方法
名称 | 说明 | 默认值 |
---|---|---|
changeDate | 通过this.$refs.myCalendar.changeDateView(date) 改变当前已选日期,参数为Dayjs 所支持的类型数据 |
- |
changeDateView | 通过this.$refs.myCalendar.changeDateView(toDate) 改变当前显示的日期,如“回到今天” |
toDate 参数不传默认为当前日期 |
slot
名称 | 说明 | 参数 |
---|---|---|
date | 日期自定义内容 | 参数及使用见下说明 |
v-slot:day 使用:
<template>
<inlineCalendar>
<!-- 自定义日期中内容 -->
<template v-slot:day="scope">
<!-- 如每月1号显示圆点 -->
<div v-if="scope.date.value === 1" class="point" />
</template>
</inlineCalendar>
</template>
<script>
// 可获取的scope对象如下
scope = {
date: {
value,//当前几号
dateTime,// 当前日期(dayjs类型)
isGrey,// 是否当前月的日期
isToday,// 是否今天
isSelect,// 是否被选中
isDisable,// 是否被禁止选择
isDuring,// 是否在已选日期段内
}
}
</script>
Reference
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].