time-range-picker 3.0.0 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +96 -88
- package/lib/time-range-picker.mjs +17741 -0
- package/lib/time-range-picker.mjs.map +1 -0
- package/lib/time-range-picker.umd.js +2 -9
- package/lib/time-range-picker.umd.js.map +1 -1
- package/package.json +47 -42
- package/lib/style.css +0 -1
- package/lib/time-range-picker.es.js +0 -15587
- package/lib/time-range-picker.es.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,88 +1,96 @@
|
|
|
1
|
-
# time-range-picker
|
|
2
|
-
|
|
3
|
-
### 引入
|
|
4
|
-
|
|
5
|
-
```
|
|
6
|
-
yarn add time-range-picker
|
|
7
|
-
npm i time-range-picker
|
|
8
|
-
|
|
9
|
-
依赖项：element-plus
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
### 使用
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
1
|
+
# time-range-picker
|
|
2
|
+
|
|
3
|
+
### 引入
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
yarn add time-range-picker
|
|
7
|
+
npm i time-range-picker
|
|
8
|
+
|
|
9
|
+
依赖项：element-plus
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
### 使用
|
|
13
|
+
```js
|
|
14
|
+
// 局部注册
|
|
15
|
+
import TimeRangePicker from 'TimeRangePicker'
|
|
16
|
+
|
|
17
|
+
// 全局注册
|
|
18
|
+
import TimeRangePicker from 'TimeRangePicker'
|
|
19
|
+
Vue.use(TimeRangePicker)
|
|
20
|
+
|
|
21
|
+
// 使用
|
|
22
|
+
<TimeRangePicker v-model:start="time.start" v-model:end="time.end" />
|
|
23
|
+
|
|
24
|
+
### 参数
|
|
25
|
+
|
|
26
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
27
|
+
| --------------------- | ------------------------------------------------ | ------------- | ----------------------- | ------------------------------------------- |
|
|
28
|
+
| start | 开始日期时间（必填） | String | -- | |
|
|
29
|
+
| end | 结束日期时间（必填） | String | -- | |
|
|
30
|
+
| type | 选择类型 | String | 见下方说明 1 | date |
|
|
31
|
+
| placeholder | 选择框默提示文字，前后用 / 隔开 | String | | 见下方说明 2 |
|
|
32
|
+
| value-format | 值类型 | String | 见下方说明 3 | |
|
|
33
|
+
| disabled | 是否禁用 | Boolean | | false |
|
|
34
|
+
| size | 组件大小 | String | large medium small mini | medium |
|
|
35
|
+
| pickerOptions | 附加参数 | Object | 见下方说明 4 | {start: '00:00',step: '00:60',end: '23:00'} |
|
|
36
|
+
| clearable | 是否显示清除按钮 | Boolean | | true |
|
|
37
|
+
|
|
38
|
+
### 说明 1（type 可选项）
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
time 时间选择
|
|
42
|
+
date-time 日期时间选择
|
|
43
|
+
date 日期选择（默认）
|
|
44
|
+
year-month 年月选择
|
|
45
|
+
month 月份选择
|
|
46
|
+
year 年份选择
|
|
47
|
+
time-select时间段范围选择
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### 说明 2（placeholder 默认值）
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
time 起始时间/结束时间
|
|
54
|
+
date-time 起始时间/结束时间
|
|
55
|
+
date 起始日期/结束日期
|
|
56
|
+
year-month 起始月份/结束月份
|
|
57
|
+
month 起始月份/结束月份
|
|
58
|
+
year 起始年份/结束年份
|
|
59
|
+
time-select起始时间/结束时间
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### 说明 3（value-format 值类型） 第一个为默认
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
time 'HH:mm', 'HH', 'HH:mm:ss'
|
|
66
|
+
date-time 'yyyy-MM-dd HH:mm:ss'
|
|
67
|
+
date 'yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd'
|
|
68
|
+
year-month 'yyyy-MM-dd'
|
|
69
|
+
month 'MM'
|
|
70
|
+
year 'yyyy'
|
|
71
|
+
time-select'HH:mm'
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### 说明 4 （pickerOptions） 附加属性
|
|
75
|
+
|
|
76
|
+
```
|
|
77
|
+
start 开始时间 string — 00:00 (time-select有效)
|
|
78
|
+
end 结束时间 string — 23:59 (time-select有效)
|
|
79
|
+
step 间隔时间 string — 00:60 (time-select有效)
|
|
80
|
+
|
|
81
|
+
startDisabledDate(time, start, end) 开始时间限制方法 (date date-time 有效，同原生disabledDate方法, 后面的第二和第三个参数是开始时间和结束时间)
|
|
82
|
+
endDisabledDate(time, start, end) 结束时间限制方法 (date date-time 有效，同原生disabledDate方法, 后面的第二和第三个参数是开始时间和结束时间)
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
#### 组件默认导出了常见的几个时间：
|
|
86
|
+
|
|
87
|
+
```ts
|
|
88
|
+
interface CommonDate {
|
|
89
|
+
currentYear: string[], 本年第一天到今天
|
|
90
|
+
currentMonth: string[], 本月第一天到今天
|
|
91
|
+
currentDay: string[], 本日0点到23点
|
|
92
|
+
pastOneYear: string[], 近一年
|
|
93
|
+
pastOneMonth: string[], 近一月
|
|
94
|
+
nowDate: string, 当前时间
|
|
95
|
+
}
|
|
96
|
+
```
|