85 lines
2.5 KiB
Markdown
85 lines
2.5 KiB
Markdown
|
# liu-calendar-date适用于uni-app项目的精美日期选择组件
|
|||
|
|
### 介绍：本组件常用于日期选择，组件代码清晰，注释全，非常适合自己DIY或学习
|
|||
|
|
### 本组件兼容小程序、H5
|
|||
|
|
# --- 扫码预览、关注我们 ---
|
|||
|
|
|
|||
|
|
## 扫码关注公众号，查看更多插件信息，预览插件效果！
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 使用示例
|
|||
|
|
```
|
|||
|
|
<template>
|
|||
|
|
<view class="page-main">
|
|||
|
|
<view @click="openCalendar" class="btn">单个日期选择器</view>
|
|||
|
|
<liu-calendar-date ref="calendar1" @checked='getDate1'></liu-calendar-date>
|
|||
|
|
<view class='text'>选中后的日期：{{ checkDay1 }}</view>
|
|||
|
|
|
|||
|
|
<view @click="openCalendar2" class="btn">日期区间选择器</view>
|
|||
|
|
<liu-calendar-date ref="calendar2" isRange @checked='getDate2'></liu-calendar-date>
|
|||
|
|
<view class='text'>选中后的日期：{{ checkDay2 }}</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
checkDay1: '',
|
|||
|
|
checkDay2: '',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//打开选择器
|
|||
|
|
openCalendar() {
|
|||
|
|
this.$refs.calendar1.open()
|
|||
|
|
},
|
|||
|
|
//打开选择器
|
|||
|
|
openCalendar2() {
|
|||
|
|
this.$refs.calendar2.open()
|
|||
|
|
},
|
|||
|
|
//单个日期选择成功
|
|||
|
|
getDate1(e) {
|
|||
|
|
this.checkDay1 = e.value
|
|||
|
|
},
|
|||
|
|
//日期区间选择成功
|
|||
|
|
getDate2(e) {
|
|||
|
|
this.checkDay2 = e.value
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.btn {
|
|||
|
|
width: 686rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
background: #2182FE;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
```
|
|||
|
|
### 属性说明
|
|||
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
|||
|
|
| ----------------------------|--------------- | ---------------------- | ---------------|
|
|||
|
|
| isRange | Boolean | false | 是否选择日期区间
|
|||
|
|
| color | String | #3A86FA | 主题色
|
|||
|
|
| range | Array | [] | 可选择的日期范围
|
|||
|
|
| animation | Boolean | true | 是否开启动画
|
|||
|
|
| safeArea | Boolean | true | 是否开启安全条
|
|||
|
|
| isMask | Boolean | true | 是否点击阴影关闭
|
|||
|
|
| @checked | Function | | 选择完日期回调事件
|