更新记录
1.0.0(2024-07-18) 下载此版本
1.0.0版本上传,插件功能完整可使用。
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | × | × | × | × | × |
日历日期选择插件
此插件为日历选择日期组件,在一个日历组件中可以选择你需要的日期,支持单选或者多选,具体效果可查看效果图
兼容app端、小程序端等等...
-
引入组件
import CalendarSelectDialog from "./calendar-select-dialog.vue";//注意组件存放路径
-
注册组件
2-1. 在单个页面中加载使用
components:{ CalendarSelectDialog }
2-2. 全局挂载使用
// main.js中全局挂载,然后在项目中全局可使用 import Vue from 'vue' import feiDragItem from "@/components/date-select-dialog.vue";//注意组件路径 Vue.component("fei-drag-item",feiDragItem)
-
完整示例
<template> <view class="content"> <calendar-select-dialog v-if="selectDateShow" :defaultDate="defaultDate" @close="selectDateShow=false" @confirm="confirmDate"></calendar-select-dialog> </view> </template> <script> export default { data() { return { selectDateShow:true, defaultDate:"", } }, methods: { dateChange(val){ console.log(val); this.defaultDate = `${val.year}-${val.month}-01 00:01:01`; }, confirmDate(val){ console.log(val); } } } </script>
-
传参使用
参数名 | 类型 | 默认 | 说明 |
---|---|---|---|
selectList | [{date:"2024-09-02"},{date:"2024-09-15"}] | 传入次参数之后,日历中只有传入的日期可选择,其余皆为禁用状态 | |
defaultDate | String | 默认显示的时间,年月,格式为yyyy-MM | |
defaultDay | String | 默认显示的具体时间,天,展示今天是几号日期,高亮显示,格式为yyyy-MM-dd | |
weekColor | String | '#000' | 顶部周几的字体颜色 |
dayColor | String | '#000' | 日历中的日期的字体颜色 |
isSingle | Boolean | true | 是否单选 |
isWeek | Boolean | true | 是否显示日历顶部的周几 |
isDateExpire | Boolean | false | 当选择的时间是已经过去时,不可选 |
@onTitle | Function | 点击顶部的时间时传递出来的点击事件 | |
@confirm | Function | 确定事件,会带出已选中的日期 | |
@clsoe | Function | 日历弹窗的关闭事件 |