162 lines
5.1 KiB
Markdown
162 lines
5.1 KiB
Markdown
|
# hbxw-date-range-picker组件
|
|||
|
|
|
|||
|
|
## 介绍
|
|||
|
|
一个可以自由定义选择级别的日期时间段选择器插件如: 2024-07-11 15:00:00 - 2030-07-12 16:18:56/2024-07-11 - 2030-07-12/2024-07-11 15:00 - 2030-07-12 16:18等
|
|||
|
|
|
|||
|
|
## 使用示例
|
|||
|
|
|
|||
|
|
使用前要以新建一个页面拷贝下面代码做一下测试，熟悉后再使用到项目中
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<button @click="selctDateRange">选择日期时间段</button>
|
|||
|
|
<button @click="selctDateRange0">选择范围:年月日</button>
|
|||
|
|
<button @click="selctDateRange1">选择范围:年月日时分</button>
|
|||
|
|
<view class="text-area" v-if="date">
|
|||
|
|
<text class="date">values: {{JSON.stringify(date.values)}}</text>
|
|||
|
|
<text class="date">start: {{JSON.stringify(date.start)}}</text>
|
|||
|
|
<text class="date">end: {{JSON.stringify(date.end)}}</text>
|
|||
|
|
<text class="date">startStr: {{date.startStr}}</text>
|
|||
|
|
<text class="date">endStr: {{date.endStr}}</text>
|
|||
|
|
<text class="date">from: {{date.from}}</text>
|
|||
|
|
</view>
|
|||
|
|
<hbxw-date-range-picker
|
|||
|
|
title="选择时间"
|
|||
|
|
:visible="dateReangeVisible"
|
|||
|
|
@cancel="cancel"
|
|||
|
|
@sure="sure"
|
|||
|
|
@change="change"
|
|||
|
|
/>
|
|||
|
|
<hbxw-date-range-picker
|
|||
|
|
title="选择时间"
|
|||
|
|
:visible="dateReangeVisible0"
|
|||
|
|
level="date"
|
|||
|
|
@cancel="cancel0"
|
|||
|
|
@sure="sure0"
|
|||
|
|
@change="change0"
|
|||
|
|
/>
|
|||
|
|
<hbxw-date-range-picker
|
|||
|
|
title="选择时间"
|
|||
|
|
:visible="dateReangeVisible1"
|
|||
|
|
level="minute"
|
|||
|
|
@cancel="cancel1"
|
|||
|
|
@sure="sure1"
|
|||
|
|
@change="change1"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dateReangeVisible: false,
|
|||
|
|
dateReangeVisible0: false,
|
|||
|
|
dateReangeVisible1: false,
|
|||
|
|
date: null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
selctDateRange() {
|
|||
|
|
this.dateReangeVisible = true;
|
|||
|
|
},
|
|||
|
|
cancel() {
|
|||
|
|
console.log('---- cancel ----');
|
|||
|
|
this.dateReangeVisible = false;
|
|||
|
|
},
|
|||
|
|
sure(res) {
|
|||
|
|
console.log('---- sure ----:', res);
|
|||
|
|
this.date = res;
|
|||
|
|
},
|
|||
|
|
change(res) {
|
|||
|
|
console.log('---- change ----:', res);
|
|||
|
|
this.date = res;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
selctDateRange0() {
|
|||
|
|
this.dateReangeVisible0 = true;
|
|||
|
|
},
|
|||
|
|
cancel0() {
|
|||
|
|
console.log('---- cancel ----');
|
|||
|
|
this.dateReangeVisible0 = false;
|
|||
|
|
},
|
|||
|
|
sure0(res) {
|
|||
|
|
console.log('---- sure ----:', res);
|
|||
|
|
this.date = res;
|
|||
|
|
},
|
|||
|
|
change0(res) {
|
|||
|
|
console.log('---- change ----:', res);
|
|||
|
|
this.date = res;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
selctDateRange1() {
|
|||
|
|
this.dateReangeVisible1 = true;
|
|||
|
|
},
|
|||
|
|
cancel1() {
|
|||
|
|
console.log('---- cancel ----');
|
|||
|
|
this.dateReangeVisible1 = false;
|
|||
|
|
},
|
|||
|
|
sure1(res) {
|
|||
|
|
console.log('---- sure ----:', res);
|
|||
|
|
this.date = res;
|
|||
|
|
},
|
|||
|
|
change1(res) {
|
|||
|
|
console.log('---- change ----:', res);
|
|||
|
|
this.date = res;
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.text-area {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.date{
|
|||
|
|
padding:20rpx 0;
|
|||
|
|
border: 1px solid rgba(0,0,0,.2);
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API
|
|||
|
|
|
|||
|
|
### Props
|
|||
|
|
|
|||
|
|
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|
|||
|
|
| ------------ | -------------| -------- | ---- | -----------------------------------|
|
|||
|
|
| visible | Boolean | false | 是 | 时间段选择器的显示与隐藏 |
|
|||
|
|
| title | String | 选择时间 | 否 | 时间段选择器标题，如果不需要传空即可 |
|
|||
|
|
| zIndex | Number | 9999 | 否 | 时间选择器的层级 |
|
|||
|
|
| yearSpan | Number | 10 | 否 | 时间选择器年份可以选到前后多少年前 |
|
|||
|
|
| level | String | time | 否 | 时间选择器选择范围定义,date(年月日)/time(年月日时分秒)/year(选择年份)/month(年月)/day(年月日同date)/hour(年月日时)/minute(年月日时分)/second(年月日时分秒同time) |
|
|||
|
|
|
|||
|
|
### Events
|
|||
|
|
|
|||
|
|
| 事件名 | 说明 | 返回值 |
|
|||
|
|
| ------------ | ------------ | ------------
|
|||
|
|
| cancel | 点击取消按钮的触发事件 | undefined |
|
|||
|
|
| sure | 点击确认按钮的触发事件 | 举列：{values: [[10,6,11,9,52,19],[0,0,1,1,0,0]],start: ["2024","07","12","09","52","19"],end: ["2024","07","13","01","00","00"],startStr: 2024年07月12日 09:52:19,endStr: 2024年07月13日 01:00:00,from: sure} |
|
|||
|
|
| change | picker状态发生变化触发事件 | 举列：{values: [[10,6,11,9,52,19],[0,0,1,1,0,0]],start: ["2024","07","12","09","52","19"],end: ["2024","07","13","01","00","00"],startStr: 2024年07月12日 09:52:19,endStr: 2024年07月13日 01:00:00,from: start/end} |
|
|||
|
|
|
|||
|
|
### 注意
|
|||
|
|
|
|||
|
|
显示的插件包体积有768kb,是包括了演示图片在里面的，真正使用的时候包体积是23KB左右
|